jquery属性操作、css操作、筛选、文档处理

一、jquery属性操作

1.属性

获取或者设置属性的值,jquery 里面可以进行一堆操作

• attr removeAttr
  attr 设置或返回被选元素的属性值
  removeAttr 从每一个匹配的元素中删除一个属性

回调函数写法

removeAttr

• prop removeProp
  prop 获取在匹配的元素集中的第一个元素的属性值
  removeProp 用来删除由.prop()方法设置的属性集

回调函数写法

removeProp

• 自定义属性
  Attr添加

Attr移除

prop添加

prop移除

回调函数写法

篮球
足球
乒乓球
反选

2.css类

• addClass removeClass
  addClass 为每个匹配的元素添加指定的类名
  removeClass 从所有匹配的元素中删除全部或者指定的类

• toggleClass
  如果存在就删除，不存在就添加一个类

移除box类

添加box类

回调函数写法

添加data类

移除data类

先判断函数中是否存在user类，false存在，移除user类

先判断函数中是否存在user类，ture不存在，添加user类

3. html代码/文本/值

• 文本操作

html() 获取或者设置元素的内容值
text() 获取或者设置元素的文本值

• 值操作
  val() 获取或者设置元素value

篮球
足球
羽毛球

二、css操作

1. css

css() 获取或设置元素的css
jquery 里面可以进行链式操作 连点

第一种写法

第二种写法

2. 位置

• offset 相对适口的偏移

• position 相对父元素的偏移 父元素 相对定位

• scrollTop 获取或设置元素的上滑距
• scrollLeft 获取或设置元素的左滑距

3. 尺寸

• width height

• innerHeight innerWidth
  获取第一个匹配元素内部区域高度,宽度（包括补白、不包括边框）

• outerWidth outerHeight
  获取第一个匹配元素外部高度，宽度（默认包括补白和边框）
  设置为ture时，计算边距在内

三、筛选

1. 过滤

• eq
  获取当前链式操作中第N个jquery对象，返回jquery对象。

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

当参数大于等于0时为正向选取，0代表第一个

当参数为负数时为反向选取，-1为倒数第一个

• first last
  first 获取第一个元素
  last 获取最后一个元素

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

first

last

• hasClass is
  hasClass 检查当前的元素是否含有某个特定的类，如果有，则返回true
  is 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
  在函数， this指的是当前的DOM元素

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

写成回调函数

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

• filter
  filter 筛选出与指定表达式匹配的元素集合

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

• map

map 将一组元素转换成其他数组

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

• has not
  has 保留包含特定后代的元素，去掉那些不含有指定后代的元素
  not 从匹配元素的集合中删除与指定表达式匹配的元素

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

has

not

• slice
  slice 选取一个匹配的子集

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

2. 查找

• children

children() 不带参 获取元素的所有子集

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

• parent parents
  parent 取得一个包含着所有匹配元素的唯一父元素的元素集合
  parents 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

• find
  find 搜索所有与指定表达式匹配的元素

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

• next nextAll nextUntil
  next 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
  nextAll 查找当前元素之后所有的同辈元素
  nextUntil 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
  next
  
  nextAll
  
  nextUntil
  
• prev prevAll
  prev 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
  prevAll 查找当前元素之前所有的同辈元素

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

prev

prevAll

• offsetParent
  offsetParent 返回第一个匹配元素用于定位的父节点

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

• siblings
  siblings 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

• add
  add 把与表达式匹配的元素添加到jQuery对象中

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

• addBack
  addBack 添加堆栈中元素集合到当前集合

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

• contents
  contents 查找匹配元素内部所有的子节点

    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

• end
  end 回到最近的一个"破坏性"操作之前

    
    
    



    
1
    
2
    
3
    
31
    
32
    
33
    
4
    
5
    
661
    
7

四、文档处理

1.内部插入

content：要追加到目标中的内容
function(index, html)：返回一个HTML字符串，用于追加到每一个匹配元素的里边。接收两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值

• append(content|fn)
  append 追加到内容之后

    
    
    


内部插入
    
    

• appendTo(content)
  appendTo 追加到内容之后

    
    
    


内部插入
    
    

• prepend(content|fn)
  prepend 追加到内容之前

    
    
    


内部插入
    
    

• prependTo(content)
  prependTo 追加到内容之前

    
    
    


内部插入
    
    

2.外部插入

• after(content|fn) before(content|fn)
  fn 只有一个参数
  after 追加到内容之后
  before 追加到内容之前

外部插入

• insertAfter(content) insertBefore(content)
  insertAfter 把一个元素追加到元素集合之后
  insertBefore 把一个元素追加到元素集合之前

    
插入
    
    

3.包裹

• wrap(html|ele|fn)
  wrap:把所有匹配的元素用其他元素的结构化标记包裹起来

    按钮
    按钮
    按钮
    按钮
    
    

• unwrap
  unwrap:移除元素的父元素

    按钮
    按钮
    按钮
    按钮
    
    

• wrapAll(html|ele)
  wrapAll:将所有匹配的元素用单个元素包裹起来

    按钮
    按钮
    按钮
    按钮
    
    

• wrapInner(html|ele|fn)
  wrapInner:将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

    按钮
    按钮
    按钮
    按钮
    
    

4.替换

• replaceWith(content|fn) replaceAll(selector)

replaceWith:将所有匹配的元素替换成指定的HTML或DOM元素

replaceAll:用匹配的元素替换掉所有 selector匹配到的元素

    按钮
    按钮
    按钮
    按钮
    
    

5.删除

• empty
  empty:删除匹配的元素集合中所有的子节点

    
内部插入
    
    

• remove
  remove:从DOM中删除所有匹配的元素

按钮
按钮
按钮
按钮
    
    

• detach
  detach:从DOM中删除所有匹配的元素

按钮
按钮
按钮
按钮
    
    

6.复制

• clone([Even[,deepEven]])
  clone:克隆匹配的DOM元素并且选中这些克隆的副本
  默认值是false，事件处理函数不会被复制
  true,事件处理函数会被克隆

按钮
按钮
按钮
按钮
    
    

7.this相互转化

• $(this)转化成this
  $(this)[0];
• this转化成$(this)