• 使用jQuery操作DOM


    1.jQuery中的DOM操作

    jQuery对JavaScript中的DOM操作进行了封装

     

    2.使用css()为指定的元素设置样式值或获取样式值

    例子:

    $(this).css("border","5px solid #f5f5f5");
    或
    $(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});
    //opacity设置透明度

    addClass() 追加样式  例子:

    $("h2").mouseover(function() {
    
      $("p").addClass("content border");
    
    });

    removeClass()移除加样式

    $("h2").mouseout(function() {
    
    $("p").removeClass("text content"); });

    toggleClass()

    模拟addClass()与removeClass()实现样式切换过程

    $("h2").click(function() {
        $("p").toggleClass("content  border");
    });

    hasClass()方法来判断是否包含指定样式

    $("h2").mouseover(function() {
        if(!$("p").hasClass("content ")){
        $("p").addClass("content ");
        }
    });
    
    -----------------------------------------------------
    $("h2").mouseout(function() {
          if($("p").hasClass("content ")) {
        $("p").removeClass("content ");
        }
    });

    3.HTML代码操作

    html()可以对HTML代码进行操作,类似于JS中的innerHTML

    语法:

    $("div.left").html();
    或
     $("div.left").html("<div class='content'></div>");

    4.text()可以获取或设置元素的文本内容

    text()用于获取第一个匹配元素的HTML内容或文本内容

    $("div.left").text();
    或
     $("div.left").text("<div class='content'></div>");

    5.val()可以获取或设置元素的value属性值

    $(this).val();
    或  $(this).val(value);

    6.工厂函数$()用于获取或创建节点

    $(selector):通过选择器获取节点

    $(element):把DOM节点转化成jQuery节点

    $(html):使用HTML字符串创建jQuery节点

    var $newNode=$("<li></li>");
    var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
    var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了!</li>");

    7.删除节点

    remove():删除整个节点

    $(selector).remove([expr]);

    empty():清空节点内容

    $(selector).empty();

    8.替换节点

    replaceWith()和replaceAll()用于替换某个节点

    var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
    
    $(".gameList li:eq(2)").replaceWith($newNode1);
    
    $($newNode1).replaceAll(".gameList li:eq(2)");

    9.复制节点

    clone()用于复制某个节点

    语法

    $(selector).clone([includeEvents]) 

    例子

    $(".gameList li:eq(1)").click(function(){
    
     $(this).clone(true).appendTo(".gameList");
    
    })
    
    $(".gameList li:eq(2)").click(function(){
    
    $(this).clone(false).appendTo(".gameList");
    
    })

    10attr()用来获取与设置元素属性 

    语法:

    $(selector).attr([name]) ;
    或
    $(selector).attr({[name1:value1]…[nameN:valueN]}) ;

    例子

    $(".contain img").attr({"200",height:"80"});

    removeAttr()用来删除元素的属性

    语法

    $(selector).removeAttr(name) ;
    

      例子

    $(".contain img").removeAttr("alt");
  • 相关阅读:
    [jenkins] 启动错误 Failed to start LSB: Jenkins Automation Server.
    SpringBoot AOP注解式拦截与方法规则拦截
    JS !function 稀奇古怪的写法
    业务场景后端优化
    对称加密和非对称加密
    第三篇 -- 余生,我累了,也懂了
    第二篇 -- 关东野客书籍
    第十一篇 -- 关于防火墙的一些问题
    第三十一篇 -- 学习第六十八天打卡20190911
    第二十九篇 -- UDP和TCP
  • 原文地址:https://www.cnblogs.com/304979850w/p/13220083.html
Copyright © 2020-2023  润新知