JQ基础（二）

JQuery基础（二）

本篇主要介绍了JQuery的选择器、属性与属性节点、attr()与prop()方法

---

JQuery

• 编辑软件：WebStorm、HbuilderX、VsCode
• 中文API文档：http://t.mb5u.com/jquery/

1.选择器

基本

• #id根据给定的ID匹配一个元素 【常用】
• element 根据DOM 节点匹配一个元素 【常用】
• .class 某个Css样式 【常用】
• * 全部
• selector1,selector2,selectorN 可以指定任意多个选择器，并将匹配到的元素合并到一个结果内
• :first 获取第一个元素 $('li:first'); 【常用】
• :last 最后一个
• :not(selector) 去除所有与给定选择器匹配的元素 $("input:not(:checked)")
• :even 匹配所有索引值为偶数的元素，从 0 开始计数 $("tr:even")
• :odd 匹配所有索引值为奇数的元素，从 0 开始计数
• :eq(index) 匹配一个给定索引值的元素【常用】
• :gt(index) 匹配所有大于给定索引值的元素 $("tr:gt(0)")
• :lt(index) 匹配所有大小于给定索引值的元素
• :header 匹配如 h1, h2, h3之类的标题元素
• :animated 配所有正在执行动画效果的元素
• :focus 配当前获取焦点的元素

层级

• ancestor descendant 在给定的祖先元素下匹配所有的后代元素 $("form input"找到表单下所有input元素
• parent > child 在给定的父元素下匹配所有的子元素
• prev + next 匹配所有紧接在 prev 元素后的 next 元素
• 等等

2.属性&属性节点

属性： 对象身上保存的变量就是属性

• 设置属性：
  • 对象.属性名称 = 值
  • 对象["属性名称"] = 值
• 获取属性
  • 对象.属性名称
  • 对象["属性名称"]

属性节点：

• 在编写HTML代码时，在HTML标签中添加的属性就是属性节点<p name="myP" ></p> 中 name 就是属性节点
• 浏览器F12——Source——watch——document.getElementByTagName("某Dom元素");——点开对象中attributes里存的就是属性节点
• 设置：DOM元素.setAttribute(“属性名”,“属性值”);
• 获取：DOM元素.getAttribute(“属性名”);
• 例：var sp3 = document.getElementsByTagName("span")[2]; sp3.setAttribute("name","inj");

任何对象都有属性，只有DOM对象才有属性节点

attr() 方法

• 传入一个参数：获取第一个匹配的元素的属性节点的值
• 传入二个参数：设置全部匹配元素属性节点的值（若该属性节点不存在，则增加该属性节点）
• removeAttr( “param1 param2”)方法可以传入多个【参数：属性节点名】，移除该元素中 符合参数要求的 全部属性节点
• 例：$("span").attr("name","inj"); $("span").removeAttr("class name"); 设置name=inj，移除span元素的class和name属性节点

prop() 方法

• 使用同上
• 区别：attr操作的是【属性节点】，prop不仅可以操作【属性】而且可以操作【属性节点】
• 浏览器F12——Source——watch——document.getElementByTagName("某Dom元素");——点开对象里存的就是属性
• removeAttr( “param1 param2”)方法可以传入多个【参数：属性节点名】，移除该元素中 符合参数要求的 全部属性节点
• 例：$("span").attr("name","inj"); $("span").removeAttr("class name"); 设置name=inj，移除span元素的class和name属性节点

官方推荐在操作属性节点时，具有 true 和 false 两个属性的属性节点，如：checked、selected 或 disabled 使用prop()，其他的使用attr()。

以上，本篇主要介绍了JQuery的选择器、属性与属性节点、attr()与prop()方法。