JQuery二-常用API

jQuery常用API

1. jQuery选择器

• ID选择器 $(“id”)

• 全选选择器 $(“*”)

• 类选择器 $(“.class”)

• 标签选择器 $(“div”)

• 并集选择器 $(“div,p,li”)

• 交集选择器 $(“li.current”)

• 子代选择器 $(“ul>li”)

• 后代选择器 $(“ul li”)

2.隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程称为隐式迭代

3. jQuery筛选方法（函数）

• parent() 最近的父级
• children(selector)
• find(selector) 后代选择器
• siblings() 查找兄弟节点
• eq(n) 下标为n的

4. 排他思想

想要多选一的效果，思想：当前元素设置样式，其他兄弟元素清除样式。

e.g. $(this).css(‘color’, ‘red’);

​ $(this).siblings().css(‘color’, ‘’);

5. 链式编程

尊滴优雅啊！！！

e.g. $(this).css(‘color’,’red’).siblings().css(‘color’, ‘’);

6. jQuery样式操作

当需要操作的样式少的情况下，可以使用css方法

当需要操作的样式多的情况下，可以操作类修改多个样式

6.1 操作css方法

• $(this).css(‘color’); 参数只写属性名，则返回属性值
• $(this).css(‘color’, ‘red’); 设置属性
• $(this).css({‘color’: ‘red’, ‘font-size’: ‘20px’})； 参数为对象形式可以设置多组样式

6.2 设置类样式方式

• 添加类： $(‘div’).addClass(‘current’)
• 移除类: $(‘div’).removeClass(‘current’)
• 切换类： $(‘div’).toggleClass(‘current’)

[注： 类操作与原生js里的className的区别]原生js的className会覆盖原来的类名，jQuery的类操作不影响原来的类名。

7. jQuery属性操作

• 设置或获取元素固有属性值：

  获取：element.prop(‘属性’) #prop = property

  设置：element.prop(‘属性’，’属性值’)

• 设置或获取元素自定义属性值：

  获取：element.attr(‘属性’) #attr = attribute

  设置：element.attr(‘属性’，’属性值’)

8. jQuery内容文本值

• 普通元素内容html() //但是还有标签
• 普通元素文本内容text()
• 表单的值val()

9. jQuery元素操作

9.1 遍历元素

jQuery隐式迭代是对同一类的元素做相同的操作，但是若想做不同操作则需要进行遍历

• $(‘div’).each(function (index, domEle) {xxx;})

• $.each(object, function(index, element) {xxx;})

9.2 创建元素

$(‘

‘)动态创建一个li

9.3 添加元素

• element.append(‘content’) 类似原生appendChild
• element.prepend(‘content’)把内容放入匹配元素内部的最前面
• element.after(‘content’) 把内容放入目标元素后面
• element.before(‘content’)把内容放入目标元素前面

9.4 删除元素

element.remove()