第十一章前端开发-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标签元素

window.onload()区别

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

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

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

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()：获取亲儿子
.find()：获取的后代
.parent()：获取父级对象
.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).slideDown(speed, 回调函数);
//2、滑出动画效果：上拉动画，隐藏元素
$(selector).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);

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：鼠标单击事件
- mouseover / mouseou：鼠标移入/移出事件
- mouseenter / mouseleave：鼠标进入/离开事件（推荐）
  - 同时使用时，可以用.hover(回调函数,回调函数)
- change：文本框内容改变事件
- select：文本框内容被选中事件
- focus：光标聚焦事件
- blur：光标失焦事件
取消事件默认的方式：
- ;
- javascript:;
- .preventDefault()

11.4.6 jQuery的属性操作

对样式操作
- 通过调用.css()方法，进行对样式的操作
  - 如果传入一个参数，看一下这个参数如果是一个字符串表示获取值，如果是对象，表示设置多少属性值
  - 如果是两个参数，设置单个属性值

对属性操作

设置属性：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()，text()，val()

对类操作

添加类：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')
})

11.4.7 jQuery的文档操作

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：替换所有

$('<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.8 jQuery的ajax

定义：
- AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）
- 在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示
方式：
- get
- post

11.4.9 jQuery的插件

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

元素

第十一章 前端开发-jQuery