jQuery进阶上集--通过案例(五星好评、轮播图、递归实现动画、全选与反选...)深入知识点

你的名字 2022-01-30 11:57 198阅读 0赞

### jQuery是不是过了保质期了 ###

现在前端三大框架，都是为了使操作者从繁琐的DOM操作中解脱出来。而现在都是面向数据编程，这样可以提高了性能和便于维护；而dom操作会让页面重绘和回流，且js数组API，字符串的API等其它操作数据的API都很完善了；在操作数据API比jQuery完善，又不建议dom操作；jQuery还有一席之地吗?

### jQuery风华正茂 ###

不管你面向数据编程还是面向老婆编程；根据江湖传言；全世界大约有80~90%的网站直接或间接地使用了jQuery。  
第零点：鉴于它如此流行，又如此好用，所以每一个入门JavaScript的前端工程师都应该了解和学习它。  
第一点：提高我们的竞争力；技多不压身，个人感觉只要没过时或则以后还有发展前途的语言可能都会增加我们的优势。多学习保证自己可持续发展战略。  
第二点，兼容性。消除浏览器差异；它封装了很多兼容代码；不需要自己写冗长的代码来针对不同的浏览器来绑定事件  
第三点：当然是它的链式编程和隐式迭代；什么是链式编程、隐式迭代后续讲  
第四点：当然是它的Ajax；异步请求和跨域请求都封装得很完善  
第五点：轻松实现动画、修改CSS等各种操作，简洁的操作DOM方法。  
第六点：jQuery的理念“Write Less, Do More“，让你写更少的代码，完成更多的工作！这不正符合我们程序猿的懒出新高度吗  
…

> 此文章较长；建议在有滴眼液的情况下观看

### jQuery页面加载事件 ###

1.  页面中所有的内容加载完毕后触发；标签、图片、第三方文件加载后触发；和DOM中的window.onload事件是相同的

$(window).load(function() { 
    	});

1.  页面中的基本的标签加载完毕后就可以触发了

$(function(){ 
    		
    	})
    	$(document).ready(function($) { 
    		
    	});

### DOM对象和jQuery对象可以互转 ###

##### DOM对象转jQuery对象；只需要加个$即可 #####

1.  比如我们需要获取页面上的li

var list = document.querySelector('li')//这是个dom对象
        $(list).click(function () { //将list转化为jq对象
            $(this).css({ backgroundColor:'red'})//将this转为jq对象
        })

##### jQuery对象转为DOM对象 #####

1.  使用get方法；`$(ele).get(index)`;index为索引值

$('li').get(0).style.background = 'yellow'

1.  使用`[index]`

$('li')[1].style.background = 'green'

### 设置文本和值的方法 ###

.html()方法,设置标签中间显示其他标签及内容,类似于innerHTML  
.text()方法,设置标签中间显示的文本内容,类似于innerText  
.val()方法.设置input标签中value的值,类似于value

##### 创建标签 #####

$('div').html('<p></p>')
    $('<p></p>')

### 选择器与隔行变色 ###

##### jQuery所有选择器 #####

感觉我举的用法例子都是很形象的…此处想象牛逼表情包…

<table> 
 <thead> 
  <tr> 
   <th>选择器名称</th> 
   <th>选择器概述</th> 
   <th>选择器用法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>#id、.class、element、*</code></td> 
   <td>这是基本的选择器：id、类、标签、通配符选择器</td> 
   <td>$(‘li’)</td> 
  </tr> 
  <tr> 
   <td><code>selector1,selector2,selectorN</code></td> 
   <td>指定任意多个选择器</td> 
   <td>$(“div,span,p.myClass”)</td> 
  </tr> 
  <tr> 
   <td><code>ancestor descendant</code></td> 
   <td>祖先后代选择器</td> 
   <td>$(“table td”)</td> 
  </tr> 
  <tr> 
   <td><code>parent &gt; child</code></td> 
   <td>父子选择器</td> 
   <td>$(“ul &gt; li”)</td> 
  </tr> 
  <tr> 
   <td><code>prev + next</code></td> 
   <td>匹配所有紧接在 prev 元素后的 next 元素</td> 
   <td>$(“label + input”)</td> 
  </tr> 
  <tr> 
   <td><code>prev ~ siblings</code></td> 
   <td>匹配 prev 元素之后的所有 siblings(作为第一个选择器的同辈) 元素</td> 
   <td>$(‘dt dd’)</td> 
  </tr> 
  <tr> 
   <td><code>:first、:last</code></td> 
   <td>获取第一个元素、最后一个元素</td> 
   <td>$(‘li:first’)</td> 
  </tr> 
  <tr> 
   <td><code>:not(selector)</code></td> 
   <td>去除所有与给定选择器匹配的元素</td> 
   <td>$(“input:not(:checked)”)</td> 
  </tr> 
  <tr> 
   <td><code>:enev、:odd</code></td> 
   <td>偶数、奇数选择器；从0开始计数</td> 
   <td>$(‘ul li:odd’)</td> 
  </tr> 
  <tr> 
   <td><code>:eq(index)、:gt(index)、:lt(index)</code></td> 
   <td>匹配一个给定索引值的元素、大于给定索引值的元素、小于给定索引值的元素</td> 
   <td>$(‘p:eq(1)’)</td> 
  </tr> 
  <tr> 
   <td><code>:lang</code></td> 
   <td>:lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。例如，选择器$(“div:lang(en)”)将匹配<code>&lt;div lang="en"&gt; and &lt;div lang="en-us"&gt;</code>（和他们的后代 
    <div>
      ），但不包括 
     <div></div> 
    </div></td> 
   <td>$(“p:lang(it)”)</td> 
  </tr> 
  <tr> 
   <td><code>:header</code></td> 
   <td>匹配如 h1, h2, h3之类的标题元素</td> 
   <td>$(":header")</td> 
  </tr> 
  <tr> 
   <td><code>:animated</code></td> 
   <td>匹配所有正在执行动画效果的元素</td> 
   <td>$(“div:animated”)</td> 
  </tr> 
  <tr> 
   <td><code>:focus</code></td> 
   <td>匹配当前获取焦点的元素。</td> 
   <td>$(“input:focus”)</td> 
  </tr> 
  <tr> 
   <td><code>:root</code></td> 
   <td>在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<code>&lt;html&gt;</code>元素。</td> 
   <td>$(":root")</td> 
  </tr> 
  <tr> 
   <td><code>:target</code></td> 
   <td>选择由文档URI的格式化识别码表示的目标元素。</td> 
   <td>类似我们的锚点链接（后面有案例理解）</td> 
  </tr> 
  <tr> 
   <td><code>:contains(text)</code></td> 
   <td>匹配包含给定文本的元素</td> 
   <td>$(“div:contains(‘John’)”) 查找所有包含 “John” 的 div 元素</td> 
  </tr> 
  <tr> 
   <td><code>:empty、:parent</code></td> 
   <td>匹配所有不包含子元素或者文本的空元素、 匹配含有子元素或者文本的元素</td> 
   <td>$(“tr:empty”)</td> 
  </tr> 
  <tr> 
   <td><code>:has(selector)</code></td> 
   <td>匹配含有选择器所匹配的元素的元素</td> 
   <td>:has(selector)</td> 
  </tr> 
  <tr> 
   <td><code>:hidden、:visible</code></td> 
   <td>匹配所有不可见元素，或者type为hidden的元素、 匹配所有的可见元素</td> 
   <td>$(“input:hidden”)</td> 
  </tr> 
  <tr> 
   <td><code>[attribute]、 [attribute=value]、[attribute^=value]、 [attribute$=value]、[attribute*=value]、[selector1][selector2][selectorN]</code></td> 
   <td>匹配包含给定属性的元素、匹配给定的属性是某个特定值的元素、以某些值开始、以某些值结尾、以包含某些值、复合选择器</td> 
   <td>$(“input[name*=‘username’]”)</td> 
  </tr> 
  <tr> 
   <td><code>:first-child、:first-of-type、:last-child、:last-of-type</code></td> 
   <td>即为每个父级元素匹配第一个子元素、匹配E的父元素的第一个E类型的孩子、匹配最后一个子元素、匹配E的父元素的最后一个E类型的孩子</td> 
   <td>$(“ul li:first-child”)</td> 
  </tr> 
  <tr> 
   <td><code>:nth-child(index)、:nth-last-child(n|even|odd|formula)、:nth-last-of-type(n|even|odd|formula)、:nth-of-type(n|even|odd|formula)</code></td> 
   <td>匹配其父元素下的第N个子或奇偶元素;index从1算起、选择所有他们父元素的第n个子元素；计数从最后一个元素开始到第一个、选择的所有他们的父级元素的第n个子元素（类型），计数从最后一个元素到第一个、选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。</td> 
   <td>$(“ul li:nth-child(2)”)</td> 
  </tr> 
  <tr> 
   <td><code>:only-child</code></td> 
   <td>如果某个元素是父元素中唯一的子元素，那将会被匹配</td> 
   <td>$(“ul li:only-child”)</td> 
  </tr> 
  <tr> 
   <td><code>:only-of-type</code></td> 
   <td>选择所有没有兄弟元素，且具有相同的元素名称的元素。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>:input</code></td> 
   <td>匹配所有 input, textarea, select 和 button 元素</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>:text、:password、:radio、:checkbox</code></td> 
   <td>匹配所有的单行文本框(type=“text”) …</td> 
   <td>$(":text")</td> 
  </tr> 
  <tr> 
   <td><code>:submit、:image、:reset、 :button、 :file</code></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>:enabled、:disabled、 :checked、 :selected</code></td> 
   <td>匹配所有可用元素、不可用元素、选中元素、选中的option元素</td> 
   <td>$(“select option:selected”)</td> 
  </tr> 
 </tbody> 
</table>

其实上面很多选择器都类似我们css的选择器;真正用到的其实也就几个

##### :target #####

$(function () { 
            $('a').click(function () { 
                $(':target').css({ background:'red'}) //点击两下
            })
        })

##### :first-child #####

其实我们联合使用的时候我们可以看做一个交集选择器；比如看下面这段代码

<div><p>111</p> <p>222</p><p>333</p></div>
    $('p:first-child').css({ background:'red'})

`$('p:first-child')`可以分解为p元素、p元素的父元素div的第一个子元素`<p>111</p>`;只有匹配这两个选择器(可以理解为交集选择器)才能匹配到;其它一些css元素都是一样的…

##### 隔行变色 #####

<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
        $('ul li:odd').css({ background:'red'})
        $('ul li:even').css({ background:'green'})

这样的代码比我们使用for循环来得更容易，简洁了些

### 操作样式 ###

1.  addClass()添加一个类

$('div').addClass('cls1').addClass('cls2') //在addClass方法中类样式的名字前面没有点(.)
    $('div').addClass('cls1 cls2')//第二种方案

1.  removeClass()移除样式

$("div").removeClass("cls1");//移除一个类
    $("div").removeClass();//移除div所有的类样式

1.  hasClass()判断是否有该类

console.log($("div").hasClass("cls1")) //返回一个布尔类型

1.  toggleClass();切换元素的类样式的（有则删除该类；没有则添加该类）

### 链式编程 ###

链式编程:对象.方法().方法().方法();…  
就像一条链子一样，一环扣一环；也就是多行代码合并成一行代码,前提要认清此行代码返回的是不是对象.是对象才能进行链式编程。

##### 链式编程实现的原理 #####

1.  实现链式编程的核心，是对象中的每一个方法都会返回当前对象。举个例子

JQuery.prototype.high = function(){ 
    	......
    	return this;//方法中，js提供一个this的关键字，表示当前对象。
    }

##### 五星好评案例谈断链 #####

需求：鼠标经过时前面的五角星为实心；后面的五角星为空心  
![效果如图][20190520145519286.gif]

$('li').on('mouseenter',function () { 
            $(this).html('★').prevAll('li').html('★').nextAll('li').html('☆')
        })

结果肯定不是我们想的这样；看了源码发现prevAll返回的是elem；不是this当前对象  
![jq][]  
prevAll()这个方法找到当前节点的所有节点，破坏了当前的链;那么我们必须写两行吗？

$(this).html('★').prevAll('li').html('★')
    $(this).nextAll('li').html('☆')

`end()`方法回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。(我们把整个五星好评写完)

$(this).html('★').prevAll('li').html('★').end().nextAll('li').html('☆')

##### 完整的五星好评案例jq代码 #####

$('li').on('mouseenter',function () { 
            $(this).html('★').prevAll('li').html('★').end().nextAll('li').html('☆')//鼠标经过li时之前的都点亮
        }).click(function () { 
            flag = true //点击了；点亮效果按点击的来
            $(this).addClass('active') //记录一下点击的点亮效果
        })
    
        $('ul').on('mouseleave',function () { 
            if(flag){ //有点击的话记录下点击的效果
                $('.active').html('★').prevAll('li').html('★').end().nextAll('li').html('☆')
                //鼠标离开时有点击时不做任何操作
                return;
            }
            $(this).children('li').html('☆')//鼠标没有点击离开时不点亮
        })

##### 兄弟元素节点 #####

除了上面的`prevAll()`节点；还有`.next()`:获取的是当前元素的下一个兄弟元素;.`nextAll()`:获取的是当前元素的后面的所有的兄弟元素;`.prev()`:获取的是当前元素的前一个兄弟元素;.`siblings()`:获取的是当前元素的所有的兄弟元素(自己除外)

#### 隐式迭代 ####

> 隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

### 动画实现轮播图 ###

##### 我们说一下jq的一些动画 #####

jq动画有：`.show()`;`.hide()`;`.toggle()`;`.slideDown()`;`.slideUp()`;`.slideToggle()`;`.fadeIn()`;`fadeOut()`;`fadeToggle()`;`fadeTo()`;`stop()`;`delay()`;`finish()`,`animate`

##### stop() #####

stop(clearQueue,jumpToEnd)  
默认是false,false  
第一个参数：是否清楚当前动画队列(干)  
第二个参数：是否跳转到当前动画的最终效果

##### animate #####

**animate(params,\[speed\],\[easing\],\[fn\])**  
params:一组包含作为动画属性和终值的样式属性和及其值的集合  
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)  
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.  
fn:在动画完成时执行的函数，每个元素执行一次。

##### 自动轮播图 #####

html结构和css样式

复制第一张图片添加到ul子元素最后

// 0. 做无缝滚动:所以需要在ul复制第一个图片然后添加到最后
     $(function () { 
        $('ul li:first-child').clone().appendTo('ul')
        })

切换下一张：其实就是对index索引值的控制（接着第一步；后面代码都是写在 $(function () \{\}接着上面一步）

var index = 0 //进来的时候显示的是第一张图片
        $('.next').on('click',function () { 
            index++
            $('ul').animate({ 'left':-$('#box').width()*index},1000,function () { 
                if(index>=$('ul li').length-1){ 
                    index = 0
                    $('ul').animate({ 'left':-$('#box').width()*index},0)
                }
                $('.active').removeClass('active')
                $('ol').children('li').eq(index).addClass('active') //按钮高亮显示
            })
        })

切换上一张也是一样:如何控制index是关键

$('.prev').on('click',function () { 
            // 上面切换下一张是动画完成，我们在切换到第一张的位置；所以在回调函数里面判断
            // 而这里我们需要在外面判断index；如果index<0;先让第一张切换到克隆的第六张在进行动画
            if(index<=0){ 
                index = $('ul li').length-1
                $('ul').animate({ 'left':-$('#box').width()*index},0)
            }
            index--
            $('ul').animate({ 'left':-$('#box').width()*index},1000,function () { 
                $('.active').removeClass('active')
                $('ol').children('li').eq(index).addClass('active') //按钮高亮显示
            })
        })

点击底部右方按钮进行切换轮播图

$('ol li').click(function () { 
            index = $(this).index()
            $('ul').animate({ 'left':-$('#box').width()*index},1000,function () { 
                $('.active').removeClass('active')
                $('ol').children('li').eq(index).addClass('active') //按钮高亮显示
            })
        })

自动播放：其实就是跟切换下一张是一样的

setInterval(function () { 
            $('.next').trigger('click') //触发点击事件
        },2000)

还有控制轮播（节阀流）、清除定时器、其它效果…这些逻辑运算自己可以想一下；不会很难.为了防止篇幅过长我就不写了…

### 添加内容与删除内容 ###

##### 将元素添加到某个元素里面去 #####

1.  `append(content)`,`appendTo(content)`,`prepend(content)`,`prependTo(content)`这些都是父子元素间的添加内容
2.  `after(content|fn)`,`before(content|fn)`,`insertAfter(content)`,`insertBefore(content)`这是兄弟元素间的添加内容

##### 删除内容 #####

1.  $(element).html("");//清空元素中的内容
2.  $(element).empty();//清空元素中的内容
3.  ("element).remove();//移除元素自身—自杀

##### 克隆 #####

clone(\[Even\[,deepEven\]\])

1.  Events：一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
2.  deepEvents：一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

##### 选择添加元素案例 #####

需求：1. 将我们选中的元素添加到另一个元素上面；2. 点击按钮，将全部元素添加到另一个元素上面  
![结果][20190520190443321.png]  
html结构

<div style="margin-left: 500px; margin-top: 20px; background-color: #999999">
        <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se1">
            <option>添加</option>
            <option>删除</option>
            <option>修改</option>
            <option>查询</option>
            <option>打印</option>
        </select>
        <div style="width: 50px; float: left;">
            <input type="button" name="name" value=">" style="width: 50px;" id="toRight" />
            <input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />
            <input type="button" name="name" value=">>" style="width: 50px;" id="toAllRight" />
            <input type="button" name="name" value="<<" style="width: 50px;" id="toAllLeft" />
        </div>
        <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se2">
        </select>
    </div>

jq代码

$(function () { 
                //第一个按钮:获取按钮添加点击事件,获取第一个下拉框中被选中的option添加到第二个下拉框
                $("#toRight").click(function () { 
                    $("#se2").append($("#se1>option:selected"));
                });
    
                //第二个按钮
                $("#toLeft").click(function () { 
                    $("#se1").append($("#se2>option:selected"));
                });
                //第三个按钮
                $("#toAllRight").click(function () { 
                    $("#se2").append($("#se1>option"));
                });
                //第四个按钮
                $("#toAllLeft").click(function () { 
                    $("#se1").append($("#se2>option"));
                });
            });

![结果][201905201903161.png]

### 自定义属性attr无效问题 ###

我们可以先来看attr的用法

$('<a>点击</a>').attr("href","https://blog.csdn.net/weixin_41105030").appendTo($('body'))

它如果是两个参数是设置属性，一个参数是获取属性，这点和css方法一样

##### 设置复选框选中问题 #####

<input type="button" value="点击勾选" id="btn"/>
    <input type="checkbox" value="1" id="ck" />打豆豆

![如果][20190521072636478.png]  
看上面的结构也知道我们需求:点击勾选；复选框被勾选（即设置属性`checked=true`）…如果已经勾选则取消

1.  先判断它是否已经勾选

onsole.log($('#ck').attr('checked'))

结果打印`undefined`;一脸黑人问号…是因为表单元素用得是`prop`  
2. 点击按钮：判断是否已经勾选来切换按钮状态和改变文本内容

$(function(){ 
            $('#btn').on('click',function () { 
                console.log($('#ck').prop('checked'))
                if($('#ck').prop('checked')){  //如果已经勾选
                    $('#ck').prop('checked',false)
                    $(this).val('取消勾选')
                }else{ 
                    $('#ck').prop('checked',true)
                    $(this).val('点击勾选')
                }
            })
        })

1.  如果想移除属性可以使用`removeProp(name)`或`removeAttr(name)`  
    如果上面使用`$('#ck').removeProp('checked')`而不是设置为false的话;**随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误**所以是不可行的

### 防止篇幅过长，影响观看效果，写成两集 ###

[https://blog.csdn.net/weixin\_41105030/article/details/90399418][https_blog.csdn.net_weixin_41105030_article_details_90399418]

[20190520145519286.gif]: /images/20220130/584b2d2c41ff4441b293704377b694c2.png
[jq]: /images/20220130/02790eb323e7496b949d47c0bb63e068.png
[20190520190443321.png]: /images/20220130/c6e0822e43a84c97800e8705d6da028a.png
[201905201903161.png]: /images/20220130/73ad90696f854c5492324e87340b81c9.png
[20190521072636478.png]: /images/20220130/9614e95d23b54ea3a6143ff84d498f9c.png
[https_blog.csdn.net_weixin_41105030_article_details_90399418]: https://blog.csdn.net/weixin_41105030/article/details/90399418