jQuery

什么是jQuery

• 是一个js语言写的关于js的框架
• 可以让程序员写的更少 但实现的更多

jQuery优势

1. 简化js代码
2. 可以像CSS一样获取元素
3. 可以直接修改元素的样式
4. 解决部分兼容性问题
5. CSS写法 .class{ color:red; }
6. JS写法 var arr = document.getElementsByClassName("class"); for(var i=0;i<arr.length;i++){ arr[i].style.color = "red"; }
7. jq写法 $(".class").css("color","red");

选择器

基本选择器

1. 标签名选择器 $("div") 匹配页面中所有的div
2. id选择器 $("#id")
3. 类选择器 $(".class")
4. 分组选择器 $("div,#id,.class")
5. 任意元素选择器 $("*")

层级选择器

1. $("div span") 匹配div下所有的span
2. $("div>span") 匹配div的所有span子元素
3. $("div+span") 匹配div的span弟弟元素
4. $("div~span") 匹配div的span弟弟们元素

层级方法

• 当得到某一个元素之后可以通过调用以下方法获得该元素的相关元素
• 获取元素的兄弟元素 $("#abc").siblings("span"); //得到id为abc元素的所有兄弟元素
• 获取元素的哥哥元素 $("#abc").prev();
• 获取元素的哥哥们元素 $("#abc").prevAll();
• 获取元素的弟弟元素 $("#abc").next();
• 获取元素的弟弟们元素 $("#abc").nextAll();

过滤选择器

1. $("div:first") 匹配所有div中的第一个
2. $("div:last") 匹配所有div中的最后一个
3. $("div:even") 匹配所有div中的所有偶数 从0开始
4. $("div:odd") 匹配所有div中的所有奇数 从0开始
5. $("div:eq(n)") 匹配所有div中下标为n的元素 从0开始
6. $("div:lt(n)") 匹配所有div中下标小于n的元素
7. $("div:gt(n)") 匹配所有div中下标大于n的元素
8. $("div:not(.abc)") 匹配所有div中 class值不为abc的所有元素

内容选择器

1. $("div:has(p)") 匹配所有包含p子元素的div
2. $("div:empty") 匹配所有空的div
3. $("div:parent") 匹配所有非空的div
4. $("div:contains('abc')") 匹配所有包含abc文本的div

可见选择器

1. $("div:hidden") 匹配所有隐藏的div元素
2. $("div:visible")匹配所有显示的div元素
3. 隐藏显示相关的方法
4. $("#abc").hide();//隐藏
5. $("#abc").show();//显示
6. $("#abc").toggle(); //隐藏显示切换

属性选择器

1. $("div[id]") 匹配所有包含id属性的div
2. $("div[id='abc']") 匹配所有id=abc 的div
3. $("div[id!='abc']") 匹配所有id不等于abc的div

子元素选择器

1. $("div:first-child") 匹配是子元素 并且是第一个div子元素
2. $("div:last-child") 匹配是子元素 并且是最后一个div子元素
3. $("div:nth-child(n)") n从1开始 匹配是子元素并且是第n个div子元素

表单选择器

1. $(":input") 匹配form表单中的所有控件 包括：文本框 密码框、单选、多选、下拉选 等
2. $(":password") 匹配所有密码框
3. $(":radio")匹配所有单选
4. $(":checkbox")匹配所有多选
5. $(":checked") 匹配所有选中的单选、多选、下拉选
6. $("input:checked") 匹配所有选中的单选和多选
7. $(":selected") 匹配所有选中的下拉选

js对象和jq对象互相转换

1. js对象转jq var jq = $(js);
2. jq对象转js var js = jq[0];

jq的文档相关操作 DOM相关

1. 创建元素 var js = document.createElement("div"); var jq = $("
   abc
   ");
2. 添加元素 $("#big").append(myh1);
3. 插入元素
4. 弟弟元素.before(新元素)
5. 哥哥元素.after(新元素)

6. 删除元素 $("#id").remove();

7. css样式相关

8. 获取样式值 var color = $("#id").css("color");
9. 设置样式 $("#id").css("样式名称","值"); $("#id").css({"width":"100px","height":"200px"});
10. 文本相关
11. 获取元素的文本内容 $("#id").text();
12. 给元素文本赋值 $("#id").text("内容");
13. html相关
14. 获取元素的html内容 $("#id").html();
15. 给元素html赋值 $("#id").html("

    hehe

    ");
16. 属性相关
17. 获取元素的属性值 $("#id").attr("class");
18. 给元素添加或修改属性值 $("#id").attr("class","值");

课程回顾

1. 选择器
2. 基础选择器
   1. 标签名
   2. id
   3. class
   4. 分组
   5. 任意元素
3. 层级选择器
   1. 子孙后代 div p
   2. 子元素 div>p
   3. 弟弟 div+span
   4. 弟弟们 div~span
   5. 兄弟元素 .siblings()
   6. 哥哥 .prev()
   7. 哥哥们 .prevAll()
   8. 弟弟 .next()
   9. 弟弟们 .nextAll()
4. 过滤选择器
   1. 第一个 div:first
   2. 最后一个 div:last
   3. 偶数 div:even
   4. 奇数 div:odd
   5. 第n个 div:eq(n)
   6. 小于n div:lt(n)
   7. 大于n div:gt(n)
   8. 不包含 div:not(.abc)
5. 内容选择器
   1. 包含子元素 div:has(p)
   2. 空元素 div:empty
   3. 非空元素 div:parent
   4. 包含文本 div:contains('aaa')
6. 可见选择器
   1. 可见 div:visible
   2. 隐藏 div:hidden
   3. 隐藏方法 .hide()
   4. 显示方法 .show();
   5. 隐藏显示切换 .toggle()
7. 属性选择器
   1. 包含id属性 div[id]
   2. id值等于abc div[id='abc']
   3. id值不等于 div[id!='abc']
8. 子元素选择器
   1. 是子元素并且是第一个div子元素 div:first-child
   2. 是子元素并且是最后一个div子元素 div:last-child
   3. 是子元素并且是第n个div子元素 div:nth-child(n)
9. 表单选择器
   1. form表单所有控件 ：input
   2. 密码框 ：password
   3. 单选 ：radio
   4. 多选 ：checkbox
   5. 选中的单选多选下拉选 ：checked
   6. 选中的单选和多选 input:checked
   7. 选中的下拉选 ：selected
10. 文档相关
11. 样式 jq.css("样式名称","值") jq.css({"xxx":"123","yyy":"456"})
12. 文本 jq.text() jq.text("abc");
13. html jq.html() jq.html("

    abc

    ")
14. 属性 jq.attr("class") jq.attr("class","值")
15. 创建元素 var jq = $("
    ")
16. 添加元素 父元素.append(jq);
17. 插入元素 兄弟元素.before/after(jq)；
18. 删除元素 jq.remove();
19. 获取元素的子元素 .children()