jquery内容

Posted 2020-12-17 yangshuwen

     1.初识jQuery以及jQuery的主要内容

         参考网址： https://www.cnblogs.com/yangshuwen/p/13183803.html

      2.jQuery选择器

             1.基本选择器

                     $("h1").css("color", "blue"); //标签选择器

                     $(".price").css({"background":"#efefef","padding":"5px"}); //类选择器

                     $("#author").css("clor", " #083499"); //id选择器

                     $(".intro,dt,dd").css("color", " #ff0000");//并集选择器

                     $("*").css("font-weight", "bold"); //全局选择器

 

              层次选择器

                     $(".textRight p").css("color","red"); //后代选择器

                     $(".textRight>p").css("color", "red"); //子选择器

                     $("h1+p").css("text-decoration", "underline"); //相邻元素选择器

                     $("h1~p").css("text-decoration", "underline"); //同辈元素选择器

              属性选择器

                     $("#news a[class]").css("background","#c9cbcb");//a标签带有class属性

                    $("#news a[class=‘hot‘]").css("background", "#c9cbcb"); // class为hot

                    $("#news a[class!=‘hot‘]").css("background", "#c9cbcb");// class不为hot

                    $("#news a[href^=‘www‘]").css("background","#c9cbcb");//以www开头

                    $("#news a[href$=‘html‘]").css("background", "#c9cbcb");//以html结尾

                    $("#news a[href*=‘k2‘]").css("background","#c9cbcb"); //包含"k2"的元素

             2.基本过滤选择器

                     :eq(index)     选取索引等于index的元素（index从0开始）

                     :gt(index)        选取索引大于index的元素（index从0开始）

                     :lt(index)     选取索引小于index的元素（index从0开始）

                     :header   选取所有标题元素

                     :focus      选取当前获取焦点的元素

                     :animated    选取当前获取焦点的元素

             3.可见性过滤选择器

                     :visible      选取所有可见的元素

                     :hidden    选取所有隐藏的元素

      3.jQuery中的事件

            1.复合事件：鼠标光标悬停、鼠标连续点击

            2.鼠标事件：当 用户在文档上移动或单击鼠标时而产生的事件

            3.键盘事件：用户每次按下或者释放键盘上的键时都会产生事件

            4.绑定事件： 使用bind（）方法   语法：bind(type,[data],fn);

            5.移除事件：使用unbind（）方法

            6.复合事件：1.hover( )    2.toggle( )   3. hover( )   4.toggle( )    5. toggleClass()

       4.jQuery中的动画

            1.控制元素的显示及隐藏：show( )控制元素的显示，hide( )控制元素的隐藏

            2.改变元素的透明度：fadeIn( )和fadeOut( )可以通过改变元素的透明度实现淡入淡出效果

            3.改变元素的高度：slideDown( )可以使元素逐步延伸显示   slideUp( )则使元素逐步缩短直至隐藏

            4.自定义动画：$(selector). animate({params},speed,callback);

       5.使用节点操作DOM

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

            2.addClass() 追加样式

            3.remove()移除加样式

            4.toggleClass()切换样式

            5.hasClass()判断是否包含指定样式

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

            7.text()可以获取或设置元素的文本内容;html()用于获取第一个匹配元素的HTML内容或文本内容

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

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

           10.remove()：删除整个节点; empty()：清空节点内容

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

           12.clone()用于复制某个节点

           13.attr()用来获取与设置元素属性 ；removeAttr()用来删除元素的属性

           14.children()方法可以用来获取元素的所有子元素

           15.next()       用于获取紧邻匹配元素之后的元素   ；prev()        用于获取紧邻匹配元素之前的元素；  slibings()      用于获取位于匹配元素前面和后面的所有同辈元素

           16.parent()    获取元素的父级元素；parents()    获取元素的祖先元素

           17.each()规定为每个匹配元素规定运行的函数

           18.end( )   结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态