概念:一个JavaScript框架。简化js开发。本质上就是js文件,封装了js的原生代码。
使用:
1.下载JQuery(一般使用1.x版本)
*jquery-xxx.js与jquery-xxx.min.js区别:
1.jquery-xxx.js :开发版本。给程序员看的,有良好的缩进和注释。
2.jquery-xxx.min.js:生产版本。程序中使用,没有缩进体积较小,程序加载较快。
2.导入JQuery的js文件:导入min.js(一般放在项目中的js文件夹中)
3.使用
JQuery对象和JS对象区别与转换
1. JQuery对象在操作时,更加方便。
2. JQuery对象和js对象方法不通用的。innerHTML=html()
3. 两者相互转换
* jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
* js -- > jq : $(js对象)
选择器
概念:用于筛选具有相似特征的元素(标签)
1.基本语法:
1.事件绑定
//给b1按钮添加单击事件
//1.获取b1按钮
$("b1").click(function(){
alert("abc");
});
2.入口函数
//入口函数,加载完资源再执行Js代码
//dom文档加载完成后执行该函数代码
//等同于window.onload
/*
两者区别在于window.onload只能定义一次,定义多次则覆盖
$则可以定义多次
*/
$(function(){
//代码
});
3.样式控制
$(function(){
$('#div1').css("样式名称","值");
});
2. 分类
1. 基本选择器
1. 标签选择器(元素选择器)
* 语法: $("html标签名") 获得所有匹配标签名称的元素
2. id选择器
* 语法: $("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
* 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
4. 并集选择器:
* 语法: $("选择器1,选择器2....") 获取多个选择器选中的所有元素
2. 层级选择器
1. 后代选择器
* 语法: $("A B ") 选择A元素内部的所有B元素
2. 子选择器
* 语法: $("A > B") 选择A元素内部的所有B子元素
3. 属性选择器
1. 属性名称选择器
* 语法: $("A[属性名]") 包含指定属性的选择器
2. 属性选择器
* 语法: $("A[属性名='值']") 包含指定属性等于指定值的选择器
3. 复合属性选择器
* 语法: $("A[属性名='值'][]...") 包含多个属性条件的选择器
4. 过滤选择器
1. 首元素选择器
* 语法: :first 获得选择的元素中的第一个元素
2. 尾元素选择器
* 语法: :last 获得选择的元素中的最后一个元素
3. 非元素选择器
* 语法: :not(selector) 不包括指定内容的元素
4. 偶数选择器
* 语法: :even 偶数,从 0 开始计数
5. 奇数选择器
* 语法: :odd 奇数,从 0 开始计数
6. 等于索引选择器
* 语法: :eq(index) 指定索引元素
7. 大于索引选择器
* 语法: :gt(index) 大于指定索引元素
8. 小于索引选择器
* 语法: :lt(index) 小于指定索引元素
9. 标题选择器
* 语法: :header 获得标题(h1~h6)元素,固定写法
5. 表单过滤选择器
1. 可用元素选择器
* 语法: :enabled 获得可用元素
2. 不可用元素选择器
* 语法: :disabled 获得不可用元素
3. 选中选择器
* 语法: :checked 获得单选/复选框选中的元素
4. 选中选择器
* 语法: :selected 获得下拉框选中的元素
DOM
1.内容操作
1.html():获取或设置元素的标签体内容 <a><font>内容</font></a> ---> <font>内容</font>
2.text():获取或设置元素的标签体纯文本内容 <a><font>内容</font></a> ---> 内容
3.val():获取或设置元素的value属性值
2.属性操作
1.通用属性操作
*attr():获取/设置元素的属性
*removeAttr():删除属性
*prop():获取/设置元素的属性
*removeProp():删除属性
attr和prop的区别:如果是html的固有属性,则建议使用Prop。如果是自定义属性则建议使用prop
2.对class属性操作
*addClass():添加class属性
*removeClass():删除class属性值
*toggleClass():切换class属性值,如果存在这个值则将其属性值删除,如果不存在则添加该值。
3.CRUD操作
1.append():父元素将子元素追加到末尾。对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾。
2.prepend():父元素将子元素添加到开头。
3.appendTo():对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾。
4.prependTo():对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头。
5.after():添加元素到对应元素后。对象1.after(对象2):将对象2添加到对象1后面。对象1和对象2是平级关系。
6.before():添加元素到对应元素前。对象1.after(对象2):将对象2添加到对象1前面。对象1和对象2是平级关系。
7.insertAfter():对象1.insertAfter(对象2):将对象2添加到对象1后边。
8.insertBefore():对象1.insertAfter(对象2):将对象2添加到对象1前边。
9.remove():移除元素。对象.remove():将对象删除。
10.empty():清空元素的所有后代元素。对象.empty():将对象的所有后代元素全部清空。但是保留当前对象和属性节点。