jQuery-属性相关操作

jQuery内容选择器

• :empty
  找到既没有文本内容也没有子元素的指定元素，返回集合元素

• :parent
  找到有文本内容或有子元素的指定元素，返回集合元素

• :contains(text)
  找到包含指定文本内容的指定元素，返回集合元素

• :has(selector)
  找到包含指定子元素的指定元素，返回集合元素

jQuery选择器

• id选择器
  根据给定的id匹配一个元素，返回单个元素

• 类选择器
  根据给定的类名匹配元素，返回找到的元素集合

• 元素选择器
  根据给定的元素名称匹配元素，返回找到的元素集合

• 通配符选择器
  匹配所有元素，返回找到的元素集合

• 并集选择器
  将所有选择器匹配到的元素合并后一起返回，返回找到的元素集合

• 后代选择器
  选取指定元素的所有后代元素(包括孙子/重孙子等)，返回找到的元素集合

• 子元素选择器
  找到指定元素的所有直接子元素，返回找到的元素集合

• 相邻兄弟选择器
  选取某个元素后面所有紧跟的那个元素，没有级别之分，返回找到的元素集合

• 通用兄弟选择器
  匹配某个元素之后的所有指定的同级元素，返回找到的元素集合

• 更多选择器请查看jQuery文档 http://jquery.cuishifeng.cn/

属性和属性节点

• 属性
  • 属性就是对象身上的变量
  • 只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)
• 属性节点
  • 在编写HTML代码时,在HTML标签中添加的属性就是属性节点
• 操作属性与属性节点

// 添加或修改属
对象.属性名称 = 值;
对象["属性名称"] = 值;
// 获取属性
对象.属性名称
对象["属性名称"]
// 获取属性节
DOM对象.getAttribute("属性节点名称")
// 设置属性节点
DOM对象.setAttribute("属性节点名称", "值");

• 属性和属性节点有什么区别
  任何对象都有属性, 但是只有DOM对象才有属性节点

jQuery中的attr和prop方法

• attr(name|pro|key,val|fn)
  • 获取或者设置属性节点的值
  • 可以传递一个参数, 也可以传递两个参数
  • 如果传递一个参数, 代表获取属性节点的值
  • 如果传递两个参数, 代表设置属性节点的值
  • 如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
  • 如果是设置:找到多少个元素就会设置多少个元素
  • 如果是设置:如果设置的属性节点不存在, 那么系统会自动新增

• removeAttr(name)
  • 用于删除指定属性节点
  • 会删除所有找到元素指定的属性节点

• prop(n|p|k,v|f)
  • 用于设置或者获取元素的属性值
  • 设置属性时,会设置所有找到元素的属性
  • 获取属性时,只会获取找到第一个元素的属性

• removeProp(name)
  • 用于删除指定属性节点
  • 会删除所有的找到的元素属性

• attr方法和prop方法区别
  • attr和prop即可以操作属性也可以操作属性节点
  • 官方推荐在操作属性节点时,具有true和false两个属性的属性节点，如checked, selected 或者disabled 使用prop()，其他的使用attr()
  • 因为如果具有true和false两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false

jQuery类操作相关方法

• addClass(class|fn)
  • 给元素添加一个或多个类
  • 如果要添加多个, 多个类名之间用空格隔开即可

• removeClass([class|fn])
  • 删除一个类
  • 如果想删除多个, 多个类名之间用空格隔开即可

• toggleClass(class|fn[,sw])
  • 切换类
  • 存在就删除不存在就添加

jQuery文本值相关的方法

• html([val|fn])
  • 添加或获取元素中的HTML，相当于JS中的innerHTML
• text([val|fn])
  • 添加或获取元素中的文本，相当于JS中的innerText
  • text方法能做的html方法都能做,所以一般使用html方法
• val([val|fn|arr])
  • 添加或获取元素value属性的值