第十一章前端开发-jQuery

11.4.0 jQuery

11.4.1 基本知识

定义： jQuery是一个快速，小巧，功能丰富的JavaScript库
作用：它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单

jQuery使用 $ 符号，占用两个变量：$ 和 jQuery

$ 实际上表示的是一个函数名. jQuery本质就是一个函数

$(); 					// 调用上面我们自定义的函数$

// 在script中写代码前，必须进行文档加载，避免出错

$(document）.ready(function(){}); 	// 文档加载，即调用入口函数

// 文档加载可简写为下面格式

$(function(){}); 		// 文档加载，即调用入口函数

// 获取元素示例

$('#btnShow');			// 获取id属性为btnShow的元素

$('div');				// 获取所有的div标签元素

jQuery的两大特点

链式编程：比如.show()和.html()可以连写成.show().html()。
隐式迭代：隐式对应的是显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

入口函数和window.onload()对比

原生 js 的入口函数指的是：window.onload = function() {}; 如下：

  //原生 js 的入口函数。页面上所有内容加载完毕，才执行。

        //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。

       window.onload = function () {

           alert(1);

       }

而 jQuery的入口函数，有以下几种写法：

写法一：

 //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。

       $(document).ready(function () {

           alert(1);

       })

写法二：（写法一的简洁版）

 //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。

       $(function () {

           alert(1);

       });

写法三：

  //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。

       $(window).ready(function () {

           alert(1);

       })

jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：

Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

$变量名冲突的方法在前面写上 jQuery.noConflict();

11.4.2 js节点对象和jQuery对象的区别

区别：
- 通过 jQuery 获取的元素是一个伪数组，数组中包含着js节点对象
- jQuery就是把js节点对象重新包装了一下，让其具有了jQuery方法
相互转换：
- js节点对象转换成jQuery对象：$(js节点对象);
- jQuery对象转换成js节点对象：jquery对象[index]; //0.1.2.3
总结：如果想要用哪种方式设置属性或方法，必须转换成该类型

11.4.3 jQuery的选择器

11.4.3.1 基本选择器

：id选择器
. ：类选择器
element：标签选择器
*：通配符选择器
, ：并集选择器

11.4.3.2 高级选择器

空格：后代选择器
>：子代选择器
+：紧邻选择器
~：兄弟选择器

11.4.3.3 属性选择器

与属性有关的选择器

11.4.3.4 基本过滤选择器

:eq()：选择一个，索引从0开始
:first：获取第一个
:last：获取最后一个
:odd：获取奇数
:even：获取偶数

11.4.3.5 筛选选择器方法

.eq()：选择一个，索引从0开始
.children()：获取亲儿子
.next():获取匹配元素后面紧邻的同辈元素
.prev(): 获取匹配元素前面紧邻的同辈元素
.find()：获取的后代
.parent()：获取集合中每个元素的父集元素，亲爹
.parents():获取集合中每个元素的祖先元素
.siblings()：获取除它之外的兄弟元素
- siblings方法的应用

1.1.4.3.6 jQuery选择器的完善机制

如果元素不存在，js不会保存阻塞其他代码的运行

//根据元素是是否有长度判断

if($('#box').length>0){

   //do something;

   }else{

       throw new Error('获取元素失败');

   }

或者转化为DOM元素来判断

if($('#box')[0]){

   //do something;

   }else{

       throw new Error('获取元素失败');

   }

11.4.4 jQuery的动画

11.4.4.1 普通动画

show()：显示动画

// 无参数，表示让指定的元素直接显示出来

$(selector).show();

// 通过控制元素的宽高、透明度、display属性，逐渐显示

$(selector).show(2000);

// slow 慢：600ms		normal 正常：400ms		fast 快：200ms

$(selector).show("slow");

// 动画执行完后，立即执行回调函数

$(selector).show(5000, function(){});

hide()：隐藏动画

$(selector).hide();

$(selector).hide(1000);

$(selector).hide("slow");

$(selector).hide(1000, function(){});

toggle()：开关式显示隐藏动画

// 显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()

$('#box').toggle(3000,function(){});

11.4.4.2 卷帘门动画

slideDown()：滑入动画
slideUp()：滑出动画

slideToggle()：滑入滑出切换动画

//1、滑入动画效果：下拉动画，显示元素

$(selector).stop().slideDown(speed, 回调函数);  //stop先清除

//2、滑出动画效果：上拉动画，隐藏元素

$(selector).stop().slideUp(speed, 回调函数);。

//3、滑入滑出切换动画效果：

$(selector).slideToggle(speed, 回调函数);

11.4.4.3 淡入淡出动画

fadeIn()：淡入动画
fadeOut()：淡出动画
fadeToggle()：淡入淡出切换动画

fadeTo()：指定透明度

//1、淡入动画效果：让元素以淡淡的进入视线的方式展示出来

$(selector).fadeIn(speed, callback);

//2、淡出动画效果：让元素以渐渐消失的方式隐藏起来

$(selector).fadeOut(1000);

//3、淡入淡出切换动画效果：通过改变透明度，切换匹配元素的显示或隐藏状态

$(selector).fadeToggle('fast', callback);

//4.$(selector).fadeTo(400,0.3) //（speed（毫秒级）,1-400数值来表示透明度）

11.4.4.4 自定义动画

.animate({params},speed,callback)
- 第一个参数表示：要执行动画的CSS属性如设置高度，宽度（必选）
- 第二个参数表示：执行动画时长（可选）
- 第三个参数表示：动画执行完后，立即执行的回调函数（可选）

11.4.4.5 停止动画

$(selector).stop(true, false);
- 第一个参数：
  - true：后续动画不执行
  - false：后续动画会执行
- 第二个参数：
  - true：立即执行完成当前动画
  - false：立即停止当前动画
- 注意：
  - 参数如果都不写，默认两个都是false
  - 实际工作中，直接写stop()用的多

11.4.5 jQuery常用事件

常用事件示例：

click：鼠标单击事件 dblclick（双击不常用）

 冒泡原理，子级元素和父级元素都绑定点击事件，点击子级元素会冒泡到父级元素 需要阻止冒泡

 <div class="box">

     <h3>冒泡</h3>

 </div>

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

     alert(‘父点击了’);

 })

 $('h3').click(function(event){

     //阻止冒泡

     event.stopPropagation();

     alert('子点击了')

 })

 event.preventDefult()； 阻止默认行为，如a标签的点击跳转 与javascipt:void(0) 一样;

mousedown/mouseup:鼠标按下、抬起
mouseover / mouseout：鼠标移入/移出事件
mouseenter / mouseleave：鼠标进入/离开事件（推荐）被选中的元素才会触发
- 同时使用时，可以用.hover(回调函数,回调函数)
change：文本框内容改变事件
select：文本框内容被选中事件
submit：提交事件
focus：光标聚焦事件
blur：光标失焦事件

keydown() keyup() :键盘事件

$(window).keydown(function(event){

    //获取整个window窗口

    console.log('键盘按下了');

    console.log(event.keyCode); //空格:32 enter:13 esc:27

})

ready() 文档加载事件

scroll() 监听窗口滚动事件

取消事件默认的方式：
- javascript:void(0);
- javascript:;
- .preventDefault()
事件委托:

原理：利用冒泡的原理，把事件加到父级上，触发执行效果。

作用：

1.性能要好

2.针对新创建的元素，直接可以拥有事件

事件源 :

跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的

使用情景：

•为DOM中的很多元素绑定相同事件；

•为DOM中尚不存在的元素绑定事件；
```
<ul>

    <li>内容太1</li>

</ul>

<script>

    $function(){

    // on('事件名','selector',callback)

    $('ul').on('click','li',function(){

        alert($(this).text());

    })

    //将来要做的事情

    setTimeout(function(){

        $('<li>内容太2</li>').appendTo('ul');

    },5000);

}

</script>
```

11.4.6 jQuery的属性操作

对属性操作

设置属性：attr(name,value);

// 获取值：attr()设置一个属性值的时候 只是获取值

var id = $('div').attr('id')

console.log(id)

var cla = $('div').attr('class')

console.log(cla)

// 设置值

//1.设置一个值 设置div的class为box

$('div').attr('class','box')

//2.设置多个值，参数为对象，键值对存储

$('div').attr({name:'hahaha',class:'happy'})

删除属性：removeAttr(name);

// 删除单个属性

$('#box').removeAttr('name');

$('#box').removeAttr('class');

// 删除多个属性

$('#box').removeAttr('name class');

prop()：设置属性
- 当该方法用于返回属性值时，则返回第一个匹配元素的值
- 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对
attr和prop的区别：
- prop方法获取的是当前节点对象的属性，单选操作
- attr方法获取的是标签上的属性
对值操作：
html() 是获取和设置选中标签元素中所有的内容
- html('') 也会清除内容
- html() 是获取选中标签元素中所有的内容
```
$('#box').html();
```
  设置值：设置该元素的所有内容会替换掉标签中原来的内容
```
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');
```
text() 获取匹配元素包含的文本内容的值

val() 用于表单控件中获取值，比如input textarea select等等

<input type="text" value="zz"></input>

<script>

    //获取文本输入框的值

	console.log($('input[type=text]').val()); //zz

	//设置文本的内容,给input设置值，要使用value属性值的值

	$('input[type=text]').val("zy");

<select multiple="multiple" id ="multiple">

    <option value="a">html</option>

    <option value="b">css</option>

    <option selected="selected">javascript</option>

    <option>vue</option>

</select>

<script>

        $('#multiple').val(['html','css']) //会默认选中，数组中写两个

</script>

对类操作

添加类：addClass()

// 为每个匹配的元素添加指定的类名

$('div').addClass("box");			//追加一个类名到原有的类名

// 为匹配的元素添加多个类名

$('div').addClass("box box2");		//追加多个类名

删除类：removeClass()

// 移除指定的类（一个或多个）

$('div').removeClass('box')；

// 移除全部的类

$('div').removeClass();

如果存在就删除，不存在就添加：toggleClass()

// 如果存在（不存在）就删除（添加）一个类。

// 语法：toggleClass('box')

$('span').click(function(){

    // 动态的切换class类名为active

    $(this).toggleClass('active')

})

判断是否有这个类：hasClass()

11.4.7 jQuery中DOM的操作

11.4.7.1 插入操作

append / appendTo：追加

父元素.append(子元素);
- 追加某元素，在父元素中添加新的子元素

var oli = document.createElement('li');

oli.innerHTML = '哈哈哈';

$('ul').append('<li>1233</li>');

$('ul').append(oli);

$('ul').append($('#app'));

子元素.appendTo(父元素)
- 追加到某元素子元素添加到父元素，会返回一个对象可以继续.方法

$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active');

$('<li>天王盖地虎</li>').appendTo($('ul')).css('color','red').click(function(){

    console.log($(this).text());  //找到文本

})

prepend / prependTo：前置添加
- 父元素.prepend(子元素);
  - 前置添加，添加到父元素的第一个位置
```
$('ul').prepend('<li>我是第一个</li>')
```
- 子元素.prependTo(父元素);
  - 前置添加，添加到父元素的第一个位置
```
 $('<a href="#">路飞学诚</a>').prependTo('ul')
```
after：在匹配的元素之后插入内容
- 兄弟元素.after(要插入的兄弟元素);
```
$('ul').after('<h4>我是一个h3标题</h4>')
```
- 要插入的兄弟元素.insertAfter(兄弟元素);
```
$('<h5>我是一个h2标题</h5>').insertAfter('ul')
```
before：在匹配的元素之后插入内容
- 兄弟元素.before(要插入的兄弟元素);
```
$('ul').before('<h3>我是一个h3标题</h3>')
```
- 要插入的兄弟元素.inserBefore(兄弟元素);
```
$('<h2>我是一个h2标题</h2>').insertBefore('ul')
```

11.4.7.2 修改操作

replaceWith：将所有匹配的元素替换成指定的string、js对象、jquery对象

$(selector).replaceWith(content);

//将所有的h5标题替换为a标签

$('h5').replaceWith('<a href="#">hello world</a>')

//将所有h5标题标签替换成id为app的dom元素

$('h5').replaceWith($('#app'));

replaceAll：用匹配的元素替换所有h4元素

$('<br/><hr/><button>按钮</button>').replaceAll('h4')

11.4.7.3 删除操作

remove：删除节点后，事件也会删除（即删除了整个标签）
- $(selector).remove();
```
$('ul').remove();
```

detach：删除节点后，事件会保留

$(selector).detach();

 var $btn = $('button').detach()

 //此时按钮能追加到ul中

 $('ul').append($btn)

empty：清空选中元素中的所有后代节点
- $(selector).empty();
```
//清空掉ul中的子元素，保留ul

$('ul').empty()
```

11.4.7.4 克隆操作

$('ul').clone(ture).appendTo('...') //要完全clone需加true参数，会复刻

11.4.8 jQuery中CSS的操作

http://book.luffycity.com/python-book/jquery/946-jquerywei-zhi-xin-xi-dui-xiang-de-cao-zuo.html

对样式操作

通过调用.css()方法，进行对样式的操作
- 如果传入一个参数，看一下这个参数如果是一个字符串表示获取值，如果是对象，表示设置多少属性值
- 如果是两个参数，设置单个属性值
  - ```
  $('#box').css({
  
   color:'red';
  
   fontSize:20;
  
   })
```
.offset() 获取当前窗口的相对偏移，是一个对象，里面保存top和left属性
scrollTop():获取元素滚动条距离顶部的距离
scrollLeft():获取元素滚动条距离左的距离
width()/height():获取和设置高度、宽度
- console.log($('#box').width()); //获取的是数值可后续做计算盒子操作
innerWidth()/innerHeight():获取匹配元素内部区域宽度（包括补白，不包括边框）
outerWidth()/outerHeight():获取匹配元素外部宽度（默认包括补白和边框）

11.4.9 jQuery的ajax

定义：
- AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）
- 在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行局部显示
- ```
$.ajax({

    url:'',

    method:'get',

    sucess:function(res){

        ....

    }

})
```
方式：
- get
- post

11.5.0 jQuery的插件

网址
```
https://www.jq22.com
```