jQuery
1、jQuery的简介
是一个轻量级的JS库-是一个被封装好的JS文件。提供了更为简便的页面元素操作方式。
封装了 DOM，JS ，CSS
核心理念：Write Less Do More
官网：https://jquery.com/
2、使用jQuery
1、引入jQuery文件
注意：引入的操作必须要放在其他jQuery操作之前
2、使用jQuery
… …
3、jQuery对象
1、什么是jQuery对象
jQuery对象是由jQuery对页面元素进行封装后的一种体现
jQuery中所提供的所有操作都只针对jQuery对象，其他对象不能用(如:DOM对象)
2、工厂函数 - $()
想要获取jQuery对象 或 转换为jQuery对象的话，就必须要使用工厂函数
3、DOM对象 和 jQuery对象之间的转换
DOM对象：以DOM的方式获取出来的节点对象，都是DOM对象,DOM对象只能使用DOM中所提供的方法和属性，是不能
访问jQuery提供的属性和方法
jQuery对象：由jQuery封装而得到的对象。jQuery对象只能访问jQuery提供的属性和方法，是不能访问DOM提供的属性和
方法
1、将DOM对象转换为jQuery对象
语法：var $obj=$(DOM对象);
注意：在为jQuery对象起名的时候，最好在变量名称前 + $
2、将jQuery对象转换为DOM对象
1、var dom对象 = jQuery对象.get(0);
2、var dom对象 = jQuery对象[0];
jQuery选择器
1、作用
获取页面上的元素们，返回jQuery对象所组成的数组
语法：$(“选择器”);
2、选择器的分类
1、基础选择器
1、ID选择器
用法:$("#ID值");
说明：返回HTML中指定ID值的元素
2、类选择器
用法;$(".className");
说明：返回HTML中所有class为className的元素
3、元素选择器
用法:$("元素名称");
说明:返回HTML中所有指定标记的元素
4、通用选择器
用法:$("*");
说明:返回HTML中所有的元素
5、群组选择器
用法:$("selector1,selector2,... ...")
说明:返回满足工厂函数内所有选择器的元素
2、层级选择器
1、$("selector1 selector2")
后代选择器
2、$("selector1>selector2")
子代选择器
3、$("selector1+selector2")
名称：相邻兄弟选择器
作用：匹配紧紧跟在selector1后面且满足selector2选择器的元素
4、$("selector1~selector2")
名称：通用兄弟选择器
作用：匹配selector1后面且满足selector2选 择器的所有元素
3、过滤选择器
1、:first
只匹配到一组元素中的第一个
2、:last
只匹配到一组元素中的最后一个
3、:not(selector)
在一组元素中，将满足selector的元素排除出去
4、:odd
匹配 偶数行 元素(奇数索引)
5、:even
匹配 奇数行 元素(偶数索引)
6、:eq(index)
匹配下标等于 index 的元素
$("p:eq(0)").css();
7、:gt(index)
匹配下标大于 index 的元素
8、:lt(index)
匹配下标小于 index 的元素
4、属性选择器
使用元素的属性来匹配页面的元素
1、[attr]
匹配具有attr属性的元素
ex:
1、匹配页面中所有有id属性的元素
$("[id]")
2、匹配页面中所有有class属性的元素
$("[class]")
2、[attr=value]
匹配attr属性值为value的元素
ex:匹配页面中所有的文本框
$(":text");
$("input[type='text']")
3、[attr!=value]
4、[attr^=value]
匹配attr属性值是以value字符开始的元素们
5、[attr$=value]
匹配attr属性值是以value字符结尾的元素们
6、[attr*=value]
匹配attr属性值中包含value字符的元素们
jQuery操作DOM
1、基本操作
1、html()
等同于dom中的 innerHTML
作用：读取或设置jQuery对象中的HTML内容
2、text()
等同于dom中的 innerText
作用：读取或设置jQuery对象中的普通文本内容
3、val()
等同于dom中的 value
作用：读取或设置jQuery对象的value值(表单)
4、属性操作
1、attr()
作用：读取或设置jquery对象的属性值
ex:
$("#main").attr("id");
$("#main").attr("class","redBack");
2、removeAttr(attrName)
作用：删除jQuery对象的指定属性
2、样式操作
1、attr("class","className")
为元素动态绑定class属性值
2、$obj.addClass("className")
$obj.addClass("c1").addClass('c2').addClass('c3').html("测试的文本");
3、removeClass("className")
删除指定的类选择器
4、removeClass()
删除所有的类选择器
5、toggleClass("className")
切换样式
元素如果具备className选择器，则删除
元素如果没有className选择器，则添加
6、hasClass("className")
判断元素是否包含className选择器
7、css("属性","值")
为元素动态的设置某css属性极其值
$obj.css("background-color","red");
8、css(JSON对象)
$obj.css({
"color":"red",
"font-size":"32px",
"text-decoration":"underline"
});
3、遍历节点
1、children() / children(selector)
获取jQuery对象的所有子元素或带有指定选择器的子元素
注意：只考虑子元素不考虑后代元素
2、next() / next(selector)
获取jQuery对象的下一个兄弟元素 / 满足selector的下一个兄弟元素
3、prev() / prev(selector)
获取jQuery对象的上一个兄弟元素 / 满足selector的上一个兄弟元素
4、siblings() / siblings(selector)
获取jQuery对象的所有兄弟 / 满足selector的所有兄弟
5、find(selector)
查找满足selector选择器的后代元素
6、parent()
查找jQuery对象的父元素
4、创建 & 插入节点
1、创建对象
语法：$("创建内容");
ex:
1、创建一个div
var $div=$("<div></div>");
2、创建一个button，文本为 测试按钮
var $btn=$("<button>测试按钮</button>");
2、插入节点
1、内部插入
1、$obj.append($new);
将$new作为$obj的最后一个子元素插入进来
2、$obj.prepend($new);
将$new作为$obj的第一个子元素插入进来
2、外部插入
1、$obj.after($new)
将$new作为$obj的下一个兄弟插入进来
2、$obj.before($new)
将$new作为$obj的上一个兄弟插入进来
5、删除节点
1、remove()
语法：$obj.remove();
作用：删除$obj元素
2、remove("selector")
语法：$obj.remove("selector")
作用：按选择器删除元素
3、empty()
语法：$obj.emptu()
作用：清空$obj中所有的内容
6、替换 和 复制
1、替换
1、replaceWith
语法:$old.replaceWith($new);
使用$new元素替换$old元素
2、replaceAll
语法：$new.replaceAll($old);
2、复制
1、clone()
$new = $old.clone();
jQuery事件
1、页面加载后执行
HTML页面加载流程：
1、向服务器发送请求
2、接收服务器的响应
3、在内存中生成DOM树
4、渲染 - 显示内容到网页上
5、执行window.onload
jQuery 处理的时候
1、向服务器发送请求
2、接收服务器的响应
3、在内存中生成DOM树
4、执行 加载后的 操作
5、渲染 - 显示内容到网页上
如何实现页面加载后执行：
1、
$(document).ready( function(){
//页面的初始化操作
//DOM数加载完成后就开始执行
} );
2、
$().ready( function(){
//页面的初始化操作
//DOM数加载完成后就开始执行
} );
3、
$( function(){
//页面的初始化操作
//DOM数加载完成后就开始执行
} );
2、jQuery实现事件的绑定
1、方式1
$obj.bind("事件名称",function(){
//事件的操作
//允许使用this来表示当前元素
});
$obj.bind("事件名称",function(event){
//事件的操作
//允许使用this来表示当前元素
//允许传递event对象，作为事件对象
});
2、方式2
$obj.事件名称(function(){
//事件的操作
//允许使用this来表示当前元素
});
$obj.事件名称(function(event){
//事件的操作
//允许使用this来表示当前元素
//允许传递event来表示事件对象
})
jQuery动画
$obj.animate()
1、基本显示 / 隐藏
语法：
显示：$obj.show(); / $obj.show(duration);
隐藏：$obj.hide(); / $obj.hide(duration);
2、滑动式 显示/隐藏
语法：
显示：$obj.slideDown() / $obj.slideDown(duration);
隐藏：$obj.slideUp() / $obj.slideUp(duration);
$obj.slideToggle()
3、淡入淡出式 显示/隐藏
语法：
显示：$obj.fadeIn() / $obj.fadeIn(duration)
隐藏：$obj.fadeOut() / $obj.fadeOut(duration)
$obj.fadeToggle()
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
