JQuery总结

               jQuery使用注意事项：

1、       使用原生dom方式找到的我们称作“原生js对象”，原生js对象只能调用原生体系的方法和属性；使用jQuery找到的我们称作“jQuery对象”，只能调用jQuery体系dom操作的方法和属性；绝对不能穿插使用。

2、       使用jQuery方式找到的“jQuery对象”无论是一个还是多个，“jQuery对象”的类型一定是一个集合类型，有一个length属性，表示集合中有多少个元素。

3、       “jQuery对象”的类型是集合，对“jQuery对象”的任意直接操作，jQuery内部都暗含着一个自动迭代的依次操作，所以我们不用再迭代后面的依次操作。

4、       在实际开发中往往存在原生js对象和jQuery对象的来回转换。

    函数里面的this默认是原生js的this

原生js转jQuery: $(原生js对象)

5、

 

jQuery常用的dom操作总结：

1. text()方法调用不给参数的表示获取双标记中间的文本内容，给一个参数设置双标记中间的文本内容。
2. index()函数可以获取一个jQuery对象在其所有兄弟中的从0开始的位置下标索引。
3. hasClass()函数判断一个jQuery对象的class属性是不是有指定的class值。
4. addClass()函数给一个jQuery对象添加指定的class属性值，如果有了什么都不发生。
5. removeClass()函数给一个jQuery对象删除指定的class属性值，如果没有什么都不发生。
6. toggleClass（）函数切换一个jQuery对象的一个或者多个class属性值。

 

1. parent() 函数可以获取一个jQuery对象的父节点
2. children() 函数可以获取一个jQuery对象的所有子节点
3. next() 函数可以获取一个jQuery对象的后面相邻的兄弟节点

10. nextAll() 函数可以获取一个jQuery对象的后面所有的兄弟节点

11. prev() 函数可以获取一个jQuery对象的前面的相邻兄弟节点

12. prev() 函数可以获取一个jQuery对象的前面所有相邻兄弟节点

13. siblings()函数可以获取一个jQuery对象除了自身外所有的兄弟节点

 

14. remove()函数可以删除自身

15.  

(1)父.append(子)  向父元素的末尾加一个儿子   （向每个匹配的元素内部追加内容）

(2)子.appendTo(父) 向父元素的末尾加一个儿子  （将所有匹配的元素追加到指定的元素中,是将前者追加到后者中）

(3)父.prepend(子)  向父元素的头部加一个儿子  （向每个匹配的元素内部前置内容）

(4)子.prependTo(父)  向父元素的头部加一个儿子 （向每个匹配的元素内部前置内容,是将前者前置到后者中）

（5）参照节点.after(新节点)    在参照节点的后面插入一个新节点

  （6）新节点.insertAfter(参照节点)    在参照节点的后面插入一个新节点

  （7）参照节点.before(新节点)    在参照节点的前面插入一个新节点

  （8）新节点.insertBefore(参照节点)    在参照节点的前面插入一个新节点

16、节点新增 $(“新增节点的html代码”)

17、val() 获取表单元素的属性值。

18、closest()想外层找，找到最接近的祖先元素。

19、find() 找所有的后代元素

20. each(I,item)为每个匹配的元素规定执行的函数。

21.监听滚动一定要监听有滚动条的元素：

   $(window).click(function(){

                        console.log($(this).scrollTop());

                       //原生js

                       console.log(document.documentElement.scrollTop);

                  });

                  $(".box").click(function(){

                       console.log($(this).scrollTop());

                       //原生js

                       // console.log(this.scrollTop);

                  });

22、找到滚动多少距离：$(“.box”).offset.top()

原生js：document.querySelector(“.box”).offsetTop

找到盒子的相对滚动的元素：document.querySelector(“.box”).offsetParent

 

自己的总结和练习：

$(document).ready(function(){

                       $(".demo").click(function(){

                       alert("敢点我啊，小伙子！");

                       $('.demo').css("color","red");

                  });

                  $("#form1 input:enabled").val("变化了");  //改变表单元素的值

                  $("#form1 input:disabled").val("这里也变了");

                  console.log($("input:checked").length) ; //输出选中的长度

                  console.log($("select :selected").text()) ;//输出选中的内容，前面的select后面是有空格的

                  console.log($("#form1 :input").length) ; //获取表单内的表单元素的个数

                  console.log($("#form1 :text").length);//获取表单单行文本框的个数

                  console.log($("#form1 :password").length); //获取表单中密码框的个数

                  //特殊字符正确写法  $("#id\\#b");  $(#id\\[1\\]);

                  //选择器的空格注意事项：

                  // (1)后代选择器   var $t_a = $(".test :hidden");  带空格的

                  // (2)过滤选择器   var $t_b = $(".test:hidden");   不带空格的     

                  });

                   $(function(){    //等待dom加载结束

                        var $category = $('ul li:gt(5):not(:last)');//获取ul 元素索引值大于5的li元素的集合，然后去掉集合元素最后一个元素

                        $category.hide();

                        var $toggleBtn = $("div.showmore>a");//获取显示全部品牌的按钮

                        $toggleBtn.click(function(){

                     if($category.is(":visible")){

                       $category.hide();

                       $(".showmore a span").text("显示全部品牌");

                       $("ul li").removeClass("promoted");

                      

                    }else {

                       $category.show();

                       $(".showmore a span").text("精简显示品牌");

                       $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");

                     }

                         return false; //超链接不跳转。

                        })

                   })

                   //show(): 显示隐藏的匹配元素

                   //css(name,value) : 给元素设置样式

                   //text(string) : 设置所有匹配元素的文本内容。

                   //filter(exper) : 筛选出指定表达式匹配的元素的集合，其中expr可以使多个选择器的组合

                   //addClass(class) : 为匹配的元素加指定的类名

                  // dom操作:

                  // (1)动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插到文档中

                //(2)当创建单个元素时,要注意闭合标签和使用标准的XHTML格式,例如

                  // 创建一个<p>元素,可以用$('</p>')或$("<p></p>"),但不要使用$("<p>")或大写的P.

                 

                  // var $li_1 = $("<li></li>");

                  // var $li_2 = $("<li></li>");

                  // $("ul").append($li_1);

                  // $("ul").append($li_2);

                  //可以链式写法  $("ul").append($li_1).append($li_2);

                 

                 

                  插入节点的方法:

                  (1)append()  向每个匹配的元素内部追加内容

                  (2)appendTo()  将所有匹配的元素追加到指定的元素中,是将前者追加到后者中

                  (3)prepend()  向每个匹配的元素内部前置内容

                  (4)prependTo()  向每个匹配的元素内部前置内容,是将前者前置到后者中

                  (5)after()  在每个匹配的元素后插入内容

                  (6)insertAfter() 在所有匹配的元素插入到指定的元素后面,是将前者的插入后者的后面

            (7)before()  在每个匹配的元素之前插入内容

                  (8)insertBefore() 在所有匹配的元素插入到指定的元素前面,是将前者的插入后者的前面

                 

                  删除节点:

                  remove()

                 var $li = $("ul li:eq(1)").remove()  //找到第二个节点将他删除

                  清空节点:

                  empty()

                  $("ul li:eq(1)").empty()  //获取此元素节点，清空此元素里的内容，注意是元素里。

                  复制节点:

                  clone()

                  单击li元素后需要载复制一个li元素

                  $("ul li").click(function(){

                       $(this).clone(true).appendTo("ul");//复制当前节点，并把它追加到<ul>元素中。

                       //clone() 方法传递一个参数true ,它的含义就是复制元素的同时复制元素所绑定的事件。

                  })

                  替换节点:

                  replaceWith()

                   $("p").replaceWith("<strong>你最喜欢的女生是谁？</strong>");

                  包裹节点:

                  wrap()

                  $("strong").wrap("<b></b>"); //b里包裹着strong

                  属性操作:

                  attr()用来获取和设置元素属性,removeAttr()用来删除元素属性

                  var $para = $("p");    //获取pj节点

                  var p_txt = $para.attr("title");  //获取p元素节点属性title

                  $("p").attr("title","you title");//设置单个属性值

                  $("p").attr("title":"you title","name":"test");//设置多个属性

             样式操作:

                  (1)获取样式和设置样式: attr()

                     获取样式:var p_class = $("p").attr("class");//获取p元素的class

                     设置样式:$("p").attr("class","high");  //设置样式

                  (2)追加样式: addClass()

                  (3)移除样式: removeClass()

                  (4)切换样式: toggleClass()

                  如:鼠标点击不断切换class值,

                    $("p").toggleClass("another");

                    <p class="myClass" title="选择你最喜欢的水果是">你最喜欢的水果是?</p>

                    <p class="myClass another" title="选择你最喜欢的水果是">你最喜欢的水果是?</p>

                  (5)判断是否含有某个样式

                  $("p").hasClass("another");