jQuery学习小结

最新推荐文章于 2021-10-24 20:49:46 发布

Mr__FFF

最新推荐文章于 2021-10-24 20:49:46 发布

阅读量196

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/Mr__FFF/article/details/81876711

版权

jQuery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

要理解DOM和JQuery的区别，DOM对象才能使用DOM中的方法，JQuery对象不可以使用DOM中的方法。

平时使用的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。

解决jQuery与其他JS库的冲突方式：

1、jQuery.noConflict(); 将变量$的控制权移交给其他库
2、重新自定义快捷方式：

  var $j=jQuery.noConflict();            
  $j(function(){...})

3、继续使用$:

-->jQuery.noConflict();            
    jQuery(function($){    //使用jQuery设定页面加载时执行的函数                
        $("p).click(function(){...});                
        })                //在函数内部继续使用$()方法        

-->jQuery.noConflict();            
    (function($){          //定义匿名函数并设置形参$                
        $(function(){      //匿名函数内部的$均为jQuery                    
            $("p).click(function(){...});                    
            });           //在函数内部继续使用$()方法                
        });            
    })(jQuery);           //执行匿名函数且传递实参jQuery

   4、如果jQuery库在其他库之前就导入了，那么可以直接使用jQuery来做一些jQuery的工作。
       这里无需再调用jQuery.noConflict()函数。

常用的css选择器：
   1、标签选择器：以文档元素作为选择符。
   2、ID选择器：以文档元素的惟一标识符ID作为选择符。
   3、类选择器：以文档元素的class作为选择符。
   4、群组选择器：多个选择符应用同样的样式规则。
   5、后代选择器：元素E的任意后代元素F。
   6、通配选择符：以文档的所有元素作为选择符。示例：*{...}

jQuery选择器：
   1、基本选择器
   2、层次选择器
   3、过滤选择器
   4、表单选择器

1、基本选择器：
   在网页中，每个id名称只能使用一次，class允许重复使用。
   #id ：根据给定的id匹配一个元素
   .class ：根据给定的类名匹配元素
   element ：根据给定元素名匹配元素
   * ：匹配所有元素
   具体示例参考锋利的jQUery的P32

2、层次选择器：
   $("ancestor descendant) ：选取ancestor元素里的所有descendant（后代）元素。
   $("parent>child") ：选取parent元素下的child元素，与$("ancestor descendant")有区别，前者选择的是单单第一层子元素，后者选择的是所有的后代元素
   $("prev+next") ：选取紧接在prev元素后的next元素等价于$(".one").next("div")
   $("prev~sibilings") ：选取prev元素之后的所有sibilings元素,$("#prev~div")等价于$("#prev").nextAll("div")，与$("#prev").siblings("div")不同地方是，后面选择的是不分位置的所有同辈节点。

3、基本过滤选择器：
   选择器都以一个冒号(:)开头。
   :first 选取第一个元素
   :last 选取最后一个元素
   :not(selector) 去除鄋与给定选择器匹配的元素
   :even 选取索引是偶数的所有元素，索引从0开始
   :odd 选取索引是奇数的所有元素，索引从0开始
   :eq(index) 选取索引等于index的元素
   :gt(index) 选取索引大于index的元素
   :lt(index) 选取索引小于index的元素
   :header 选取所有的标题元素
   :animated 选取当前正在执行动画的所有元素
   :focus 选取当前获取焦点的元素

4、内容过滤选择器：
   :contains(text) 选取含有文本内容为“text”的元素
   :empty 选取不包含子元素或者文本的空元素
   :has(selector) 选取含有选择器所匹配的元素的元素
   :parent 选取含有子元素或者文本的元素

5、可见性过滤选择器：
   :hidden 选取所有不可见元素
   :visible 选取所有可见元素