jquery的特点

一、设置多个样式的方法

第一种：{"属性名":"属性值" ,"属性名":"属性值"，....}

       $(this).css({
        "background-color":"pink",
           "color":"orange
        })

第二种：使用链接式写法

        $(this).css("background-                                                                                        
           color","pink").css("color","orange");

二、hide() 隐藏 和show() 显示 的使用

1.hide() 隐藏

 $("div:visible").hide(500);// hide() 隐藏   

2.show() 显示

 $("div:hidden").show(500);// show() 显示   

  $(function () {
​
     $("#btn1").click(function () {
​
        // $("div :visible")中的visible是用来获取到可见元素的 
​
          $("div:visible").  hide(500); // hide() 隐藏   
​
     })
​
       $  ("#btn2").  click  (function () {
​
        // $("div :hidden")中的hidden是用来获取到隐藏元素的 
​
         $  ("div:hidden").  show  (500); // show() 显示   
​
      })
​
    })

三、jquery中html()、text()、val()的区别

1、 .html() 用来读取和修改元素的HTML标签，对应js中的innerHTML。

.html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素

          $("div").click(function () {
       console.log( $(this).html());
     })

效果演示：

2、 .text() 用来读取或修改元素的纯文本内容 对应js中的innerText

text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上

        $("div").click(function () {
           $(this).text("<p>我是p标签</p>");    
      })

效果演示：

3、 .val() 用来读取或修改表单元素的value值

.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上

          $("div").click(function () {
          $("#username").val("用户名")
     })

效果演示：

四、jquery改变class属性的方法：

1. jQuery addClass() 方法

addClass()方法向匹配的元素增加指定的类名(一个或多个)

注意:对于元素来说,class属性可以有多个值.该方法不会移除已经存在的值,而是在原有的基础上追加一个或多个class属性.

$("li").addClass("bigger");

2.jQuery removeClass()方法

removeClass(）方法向被选元素移除一个类名

$("li").removeClass("bigger");

3.jQuery hasClass()方法

hasClass() 方法 判断被选元素是否包含这个类名

         // 移出class为bigger的  
           $("ul li").removeClass("bigger");
         // 移出全部class  
          // $("ul li").removeclass();  

4.jQuery toggleClass()方法

toggleClass()方法判断被选元素是否有该类名，-如果有就移除他，如果没有，添加他。

    $("ul li").toggleClass("bigger");

五、添加，删除，替换，复制节点

1.添加

/\append( ), appendTo( ) ,prepend(), prependToo()都是给某元素前面/后面添加子元素

before( )/after():指的是给某元素前面/后面添加兄弟元素

（1）使用append()在被选元素的结尾插入内容节点

$("ul").  append  ("<li>桃子</li>")

（2）、使用appendTo()在被选元素的结尾插入元素节点

$("<li>榴莲</li>").appendTo("ul")

（3）使用prepend()在被选元素的开头插入内容节点；

 $("ul").prepend("<li>李子</li>")

（4）使用prependTo()在被选元素的开头插入元素节点。

 $("<li>草莓</li>").prependTo("ul")

（5）使用before()在元素的兄弟开头插入元素节点

 $("ul").before("<h1>水果清单</h1>")

（6）使用after()在元素的兄弟结尾插入元素节点

$("ul").after("<span>请尽快食用</span>")

2.删除

（1）remove()：删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素。

$("ul li:eq(2)").remove();//获取第3个元素节点后，将它从网页中删除

（2）// empty()：方法并不是删除节点，而是清空节点，它能清空元素中所有后代节点。

$("ul li:eq(1)").empty(); //获取第2个<li>元素节点后，清空元素里的内容，注意是元素里

3.替换

（1） $(替换的内容).replaceAll(选择器)：将内容替换到目标元素上

$("<li>香蕉</li>").replaceAll("ul li:eq(1)");

（2）$(替换的内容).replaceAll(选择器)：将内容替换到目标元素上

  $("<li>香蕉</li>").replaceAll("ul li:eq(1)")

（3）$(Selection).clone()：复制元素

将复制的元素替换到目标元素上

  $("ul li:eq(2)").clone().replaceAll("ul li:eq(1)");