jq选择器

###jQuery

• 是一个js语言的框架, 对原生JS进行封装,可以让程序员写的更少但实现的更多.
  ###如何引入jq

• 因为jq框架就是一个通过js语言写的框架,可以理解成就是一个普通的js文件,和引入一个普通的js文件一样.

    <script src="路径">
  

####如何查询页面中的标签对象
var d = document.getElementById(“id”);

• 在jq中可以像CSS一样获取页面中的元素对象
  ###jq中的各种选择器
  ####基础选择器

1. 标签名选择器 $(“div”)
2. id选择器 $("#id")
3. class选择器 $(".class")
4. 分组选择器 $(“div,#id,.class”)
5. 任意元素选择器 $("*")
   ####层级选择器
6. $(“div span”) 匹配div里面所有的span
7. $(“div>span”) 匹配div里面的span子元素
8. $(“div+span”) 匹配div的弟弟span
9. $(“div~span”) 匹配div的弟弟们span

• 层级相关方法
  1. 获取id为abc元素的所有兄弟 $("#abc").siblings()
  2. 获取id为abc元素的哥哥元素 $("#abc").prev()
  3. 获取id为abc元素的哥哥们元素 $("#abc").prevAll();
  4. 获取id为abc元素的弟弟元素 $("#abc").next();
  5. 获取id为abc元素的弟弟们元素 $("#abc").nextAll();
  6. 获取id为abc元素的父元素 $("#abc").parent();
  7. 获取id为abc元素的孩子们元素 $("#abc").children()
     ####过滤选择器

1. $(“div:first”) 匹配所有div 中的第一个
2. $(“div:last”) 匹配所有div中的最后一个
3. $(“div:eq(n)”) 匹配所有div中下标等于n的
4. $(“div:lt(n)”) 匹配所有div中下标小于n的
5. $(“div:gt(n)”) 匹配所有div中下标大于n的
6. $(“div:even”) 匹配所有div中下标为偶数的
7. $(“div:odd”) 匹配所有div中下标为奇数的
8. $(“div:not(.abc)”) 匹配所有div中class值不是abc的
   ####内容选择器
9. $(“div:has§”) 匹配包含p子元素的div
10. $(“div:empty”) 匹配空的div
11. $(“div:parent”) 匹配非空的div
12. $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div
    ####可见选择器
13. $(“div:hidden”) 匹配所有隐藏的div
14. $(“div:visible”) 匹配所有显示的div

• 隐藏显示相关的方法
  1. 让id为abc的元素隐藏 $("#abc").hide();
  2. 让id为abc的元素显示 $("#abc").show();
  3. 让id为abc的元素显示和隐藏切换 $("#abc").toggle();
     ####属性选择器

1. $(“div[id]”) 匹配有id属性的div
2. $(“div[id=‘xxx’]”) 匹配id值为xxx的div
3. $(“div[id!=‘xxx’]”) 匹配id值不等于xxx的div
   ####子元素选择器
4. $(“div:first-child”) 匹配是第一个并且是子元素的div
5. $(“div:last-child”) 匹配是最后一个并且是子元素的div
6. $(“div:nth-child(n)”) 匹配是第n个并且是子元素的div
   ####表单选择器
7. $(":input") 匹配的是表单中所有的控件
8. $(":password") 匹配所有密码框
9. $(":radio") 匹配所有单选
10. $(":checkbox") 匹配所有多选
11. $(":checked") 匹配所有选中的单选多选和下拉选
12. $(“input:checked”) 匹配所有选中的单选和多选
13. $(":selected") 匹配所有选中的下拉选
    ####创建元素对象
    var d = $(“
    abc
    ”);
    ###添加到某个元素里面

• 添加到最后面
  $(“body”).append(d);
• 添加到最前面
  $(“body”).prepend(d);
• 插入到某个元素的前面
  $("#abc").before(d);
• 插入到某个元素的后面
  $("#abc").after(d);
  ####删除元素
  $("#abc").remove();

####修改元素/标签
#####修改标签文本

• 修改id为abc元素的文本内容为xxx
  $("#abc").text(“xxx”);