一、JQuery和JS？
1.1. JQuery简单介绍
- 概念：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优 化HTML文档操作、事件处理、动画设计和Ajax交互。
- 本质：封装了js的原生代码的js文件。
1.2. JQuery对象和JS对象区别与转换
- 区别：
JQuery对象在操作时，更加方便。
JQuery对象和js对象方法不通用的. - 转换：
- jq – > js :
jq对象[索引] 或者 jq对象.get(索引) - js – > jq :
$(js对象)
- jq – > js :
1 | <script> |
二、基本操作
2.1. 事件绑定
1 | <script> |
2.2. 入口函数
1 | <script> |
window.onload 和 $(function) 区别
- window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
- $(function)可以定义多次的。
2.3. 样式控制：css方法
1 | <script> |
三、选择器
3.1. 基本选择器
3.1.1. 标签选择器（元素选择器）
* 语法： $("html标签名") 获得所有匹配标签名称的元素3.1.2. id选择器
* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素3.1.3. 类选择器
* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素3.1.4. 并集选择器：
* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素3.1.5.代码演示
1 | <script type="text/javascript"> |
3.2. 层级选择器
3.2.1. 后代选择器
* 语法： $("A B ") 选择A元素内部的所有B元素，包括孙子辈3.3.2. 子选择器
* 语法： $("A > B") 选择A元素内部的所有B子元素，只有儿子辈的3.3.3.代码演示
1 | <script type="text/javascript"> |
3. 3.属性选择器
3.3.1. 属性名称选择器
- 语法：
$("A[属性名]")包含指定属性的选择器。3.3.2. 属性选择器
$("A[属性名='值']")包含指定属性等于指定值的选择器。$("A[属性名!='值']")匹配所有不含有指定的属性，或者属性不等于特定值的元素- 此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])。
$("A[属性名 ^= '值']")匹配给定的属性是以某些值开始的元素。$("A[属性名 $= '值']")匹配给定的属性是以某些值结束的元素。$("A[属性名 *= '值']")匹配给定的属性包含某些值的元素。3.3.3. 复合属性选择器
- 语法：
$("A[属性名='值'][]...")同时包含多个属性条件的选择器。3.3.4.代码演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33<script type="text/javascript">
$(function () {
//<input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
$("#b1").click(function () {
$("div[title]").css("backgroundColor", "red");
});
// <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
$("#b2").click(function () {
$("div[title='test']").css("backgroundColor", "red");
});
// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
$("#b3").click(function () {
$("div[title!='test']").css("backgroundColor", "red");
});
// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
$("#b4").click(function () {
$("div[title^='te']").css("backgroundColor", "red");
});
// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
$("#b5").click(function () {
$("div[title$='est']").css("backgroundColor", "red");
});
// <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
$("#b6").click(function () {
$("div[title*='es']").css("backgroundColor", "red");
});
// <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
$("#b7").click(function () {
$("div[id][title*='es']").css("backgroundColor", "red");
});
});
</script>3.4. 过滤选择器
3.4.1. 首元素选择器
- 语法： :first 获得选择的元素中的第一个元素
3.4.2. 尾元素选择器
- 语法： :last 获得选择的元素中的最后一个元素
3.4.3. 非元素选择器
- 语法： :not(selector) 不包括指定内容的元素
3.4.4. 偶数选择器
- 语法： :even 偶数，从 0 开始计数
3.4.5. 奇数选择器
- 语法： :odd 奇数，从 0 开始计数
3.4.6. 等于索引选择器
- 语法： :eq(index) 指定索引元素
3.4.7. 大于索引选择器
- 语法： :gt(index) 大于指定索引元素
3.4.8. 小于索引选择器
- 语法： :lt(index) 小于指定索引元素
3.4.9. 标题选择器
- 语法： :header 获得标题（h1~h6）元素，固定写法
3.4.10.代码演示
1 | <script type="text/javascript"> |
3.5. 表单过滤选择器
3.5.1. 可用元素选择器
- 语法：
:enabled获得可用元素3.5.2. 不可用元素选择器
- 语法：
:disabled获得不可用元素3.5.3. 选中选择器
- 语法：
:checked获得单选/复选框选中的元素3.5.4. 选中选择器
- 语法：
:selected获得下拉框选中的元素3.5.6.注意
注意：
- 下拉列表中 ，应该选中option而不是select
- 冒号前后不能加空格
3.4.7.代码演示
1 | <script type="text/javascript"> |
四、DOM操作
4.1. 内容操作
4.1.1. html(): 获取/设置元素的标签体内容
`<a><font>内容</font></a> --> <font>内容</font>`4.1.2. text(): 获取/设置元素的标签体纯文本内容
`<a><font>内容</font></a> --> 内容`text()方法设置值之后，是直接将标签体和内容直接置换 和html()效用相同
4.1.3. val()： 获取/设置元素的value属性值
4.1.4.代码演示
1 | <script> |
4.2.属性操作
4.2.1. 通用属性操作
attr(): 获取/设置元素的属性removeAttr():删除属性prop():获取/设置元素的属性removeProp():删除属性attr和prop区别？
- 如果操作的是元素的固有属性，则建议使用prop。
- 如果操作的是元素自定义的属性，则建议使用attr。
- checked、selected、disable、enable只能用prop获取，用attr获取不到。
- 代码演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<script type="text/javascript">
$(function () {
//获取北京节点的name属性值
var name = $("#bj").attr("name");
alert(name);
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");
//新增北京节点的discription属性 属性值是didu
$("#bj").attr("discription","didu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");
//获得hobby的的选中状态
var checked = $("#hobby").prop("checked");
alert(checked);
});
</script>
4.2.2. 对class属性操作
addClass():添加class属性值。removeClass():删除class属性值。toggleClass(): 切换class属性。toggleClass(“one”):
判断如果元素对象上存在class=”one”，则将属性值one删除掉。
如果元素对象上不存在class=”one”，则添加。css(): 传入一个参数，就是获取对应值，传入两个参数，就是设置对应值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<script type="text/javascript">
$(function () {
//<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
$("#b1").click(function () {
$("#one").prop("class", "second");
});
//<input type="button" value=" addClass" id="b2"/>
$("#b2").click(function () {
$("#one").addClass("second");
});
//<input type="button" value="removeClass" id="b3"/>
$("#b3").click(function () {
$("#one").removeClass("second");
});
//<input type="button" value=" 切换样式" id="b4"/>
$("#b4").click(function () {
$("#one").toggleClass("second");
});
//<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
$("#b5").click(function () {
var color = $("#one").css("backgroundColor");
alert(color);
});
//<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
$("#b6").click(function () {
$("#one").css("backgroundColor", "green");
});
});
</script>4.2.3.CRUD操作:
append():父元素将子元素追加到末尾对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾prepend():父元素将子元素追加到开头对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头appendTo():对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾prependTo()：对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头after():添加元素到元素后边对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系before():添加元素到元素前边对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系insertAfter()对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1和对象2是兄弟关系insertBefore()对象1.insertBefore(对象2)： 将对象1添加到对象2前边。对象1和对象2是兄弟关系remove():移除元素对象.remove():将对象删除掉empty():清空元素的所有后代元素。对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性点clone(Even[,deepEven]]):复制当前对象EventsBooleanV1.0
一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
Events[,deepEvents]Boolean,BooleanV1.5
1:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
2:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。
4.2.4. 案例演示
元素的移动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<script type="text/javascript">
$(function () {
// <input type="button" value="将反恐放置到city的后面" id="b1"/>
$("#b1").click(function () {
//$("#city").append($("#fk"));
$("#fk").appendTo($("#city"));
});
// <input type="button" value="将反恐放置到city的最前面" id="b2"/>
$("#b2").click(function () {
//$("#city").prepend($("#fk"));
$("#fk").prependTo($("#city"));
});
// <input type="button" value="将反恐插入到天津后面" id="b3"/>
$("#b3").click(function () {
//$("#tj").after($("#fk"));
$("#fk").insertAfter($("#tj"));
});
// <input type="button" value="将反恐插入到天津前面" id="b4"/>
$("#b4").click(function () {
//$("#tj").before($("#fk"));
$("#fk").insertBefore($("#tj"));
});
});
</script>
<script type="text/javascript">
$(function () {
// <input type="button" value="删除<li id='bj' name='beijing'>北京</li>" id="b1"/>
$("#b1").click(function () {
$("#bj").remove();
});
// <input type="button" value="删除city所有的li节点 清空元素中的所有后代节点(不包含属性节点)" id="b2"/>
$("#b2").click(function () {
$("#city").empty();
});
});
</script>表格隔行换色
1
2
3
4
5
6
7
8
9
10<script>
//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
$(function () {
//获取奇数行tr，设置背景色为pink
$("tr:gt(1):odd").css("backgroundColor","pink");
//获取偶数行的tr，设置背景色为yellow
$("tr:gt(1):even").css("backgroundColor","yellow");
});
</script>全选 全不选
1
2
3
4
5
6
7<script>
function selectAll(obj) {
//需要保证第一个复选框的选中状态和下面的选中状态一致
//获取下面的复选框
$(".itemSelect").prop("checked", obj.checked);
};
</script>实现下拉列表选择条目左右选择功能
1
2
3
4
5
6
7
8
9$(function () {
$("#toRight").click(function () {
$("#leftName option:selected").appendTo($("#rightName"));
});
$("#toLeft").click(function () {
$("#rightName option:selected").appendTo($("#leftName"));
});
});
扫一扫
1319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
