jQuery中的选择器

jQuery框架

• 此框架就是对原生JavaScript中DOM部分内容进行了
封装,可以让程序员开发效率更高
• 如何使用jQuery框架?
此框架就是一个普通的js文件, 通过script标签的src属
性引入到HTML页面即可
• js对象和jq对象互相转换
js转jq: let jq = $(js);
jq转js: let js = jq[0]; jQuery对象实际上就是一
个数组 ,里面装的是js对象

jQuery选择器

1. 基础选择器
   ○标签名选择器 $(“div”)
   ○id选择器 $("#id");
   ○类选择器 $(".class");
   ○分组选择器 $(“div,#id,.class”);
   ○任意元素选择器 $("*")
2. 层级选择器
   ○$ (“div span”) 子孙后代选择器
   ○$ (“div>span”) 子元素选择器
   ○层级相关想法:
   ○● $("#abc").next(“span”) 匹配id为abc元素的弟弟元素
   ○● $("#abc").nextAll() 匹配id为abc元素的弟弟们元素
   ○● $("#abc").prev() 匹配id为abc元素的哥哥元素
   ○● $("#abc").prevAll() 匹配id为abc元素的哥哥们元素
   ○● $("#abc").siblings() 匹配id为abc元素的所有兄弟元素
   ○● $ ("#abc").parent() 匹配id为abc元素的父元素
   ○● $ ("#abc").children() 匹配id为abc元素的子元素们
3. 过滤选择器
   ○ $(“div:first”) 匹配第一个div
   ○ $(“div:last”) 匹配最后一个div
   ○ $(“div:eq(n)”) 匹配下标为n的div n从0开始
   ○ $(“div:lt(n)”) 匹配下标小于n 的div
   ○ $(“div:gt(n)”) 匹配下标大于n的div
   ○ $(“div:not(.abc)”) 匹配class值不是abc的div
   ○ $(“div:even”) 匹配下标为偶数的div
   ○ $(“div:odd”) 匹配下标为奇数的div
4. 内容选择器
   ○ $(“div:has§”) 匹配包含p子元素的div
   ○ $(“div:empty”) 匹配空的div
   ○ $(“div:parent”) 匹配非空的div
   ○ $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div
5. 可见选择器
   ○ $(“div:visible”) 匹配所有显示的div
   ○ $(“div:hidden”) 匹配所有隐藏的div
   显示隐藏相关的方法
   ○ $("#abc").show() 让元素显示
   ○ $("#abc").hide() 让元素隐藏
   ○ $("#abc").toggle() 让元素显示隐藏状态切换
6. 属性选择器
   ○ $(“div[属性名]”) 匹配包含xxx属性的div
   ○ $(“div[属性名=‘值’]”) 匹配某个属性名等于某个值的div
   ○ $(“div[属性名!=‘值’]”) 匹配某个属性名不等于某个值的div
7. 子元素选择器
   ○ $(“div:first-child”) 匹配的是div并且是子元素并且是第一个
   ○ $(“div:last-child”) 匹配的是div并且是子元素并且是最后一个
   ○ $(“div:nth-child(n)”) 匹配的是div并且是子元素并且是第n个 8. 表单选择器
   ○ $(":input") 匹配所有控件
   ○ $(":password") 匹配所有密码框
   ○ $(":radio") 匹配所有单选
   ○ $(":checkbox") 匹配所有多选
   ○ $(":checked") 匹配所有选中的单选多选和下拉选
   ○ $(“input:checked”) 匹配所有选中的单选和多选
   ○ $(":selected") 匹配所有选中的下拉选

修改元素相关

1. 创建元素对象
   let d = $(“文本内容”);
2. 添加元素对象
   父元素.append(新元素) 把新元素添加到父元素里面的最后面
   父元素.prepend(新元素) 把新元素添加到父元素里面的最前面
3. 插入元素
   兄弟元素.before(新元素) 把新元素插入到兄弟元素的前面
   兄弟元素.after(新元素)把新元素插入到兄弟元素的后面
4. 删除元素
   元素对象.remove();
5. 获取和修改元素的文本内容 innerText
   元素对象.text(); 获取
   元素对象.text(“xxx”); 修改
6. 获取和修改元素的html内容 innerHTML
   元素对象.html(); 获取
   元素对象.html(“xxxx”); 修改
7. 获取和修改元素的css样式
   元素对象.css(“样式名”); 获取某个样式的值
   元素对象.css(“样式名”,“值”); 修改样式的值
   元素对象.css({“样式1名”:“值”,“样式2名”:“值”}); 批
   量修改元素的值

获取和修改元素的属性

元素对象.attr(“属性名”); 获取
元素对象.attr(“属性名”,“值”); 修改