jQuery基础

一、DOM对象和jQuery对象互相转化

1、DOM转化为jQuery

（1）$('div'); [这里div有引号]
（2）var div = document.querySelector('div'); $(div) [注意这里div没有引号]

2、jQuery对象转化为DOM对象

（1）$('div')[0].css();[css()指jq方法]
（2）$('div').get(index).css();

二、jQuery常用API

1、jQuery层级选择器

（1）$("ul > li"); 子代选择器，只取子代，不取孙代
（2）$("ul li"); 后代选择器，取所有后代

•   隐式迭代（重要）：指遍历内部DOM元素
  

2、jQuery筛选选择器

（1）$('li:first'); 获取第一个li元素
（2）$('li:last'); 获取最后一个li元素
（3）$("li:eq(index)"); index从0开始
（4）$("li:odd"); 选择索引号为奇数的元素
（5）$("li:even"); 选择索引号为偶数的元素

3、jQuery筛选方法

（1）$("li").parent();查找父级
（2）$("ul".children("li");查找最近一级子代
（3）$("ul").find("li");查找所以子代
（4）$(".first").siblings("li");查找兄弟节点，不包括自己
（5）$(".first").nextAll() 查找当前元素之后所有的同辈元素
（6）$(".last").prevAll() 查找当前元素之前所有的同辈元素
（7）$('div').hasClass("类名") 检查当前元素是否含有某个特定的类，有则返回true
（8）$("li").eq(index); 相当于$("li:eq(index)");,index从0开始
（9）$(this) 当前元素
（10）$(this).parents("选择器")当前元素指定的祖先级元素

4、jQuery样式操作

（1）$(this).css("color"); 只写属性名，返回属性值
（2）$(this).css("color", "red"); 修改或添加属性值
（3）$(this).css({color: "red", width: 100px }); 属性可以是对象形式
（4）$("div").addClass("current"); 添加类
（5）$("div").removeClass("current"); 移除类
（6）$("div").toggleClass("current"); 切换类

5、jQuery部分方法

（1）show() 元素显示
（2）hide() 元素隐藏
（3）slideDown() 向下滑动
（4）slideUp()向上滑动
（5）slideToggle()滑动切换
（6）stop()停止动画排队
（7）fadeIn()淡入
（8）fadeOut() 淡出
（9）fadeTo()修改元素透明度
（10）animate() 自定义动画（参数是对象）
（11）prop("属性") 获得元素固有属性；prop(“属性”,“值”) 修改元素固有 属性
（12）attr("属性")获得元素自定义属性；attr(“属性”,“值”) 修改元素自定义属性
（13）data() 数据缓存，存放在元素的内存里
（14）:checked选择器，返回被选中的复选框个数
（15）toTixed(n)当前计算保留n位小数
（16）change(){ }元素值改变后执行{}里的代码
（17）$("div").each(function(index, domEle){ })方法遍历元素
（18）$.each("("div"),function(index, ele){})方法遍历元素，用于处理数据

6、jQuery内容文本词

（1）html()获取元素内容；html("内容")修改元素内容
（2）text()获取元素文本内容；text("内容")修改元素文本内容
（3）val()获取表单值；val("内容")修改表单值

7、jQuery元素操作

（1）$("<li><li>") 创建元素
（2）$("ul").append(li) 内部添加元素并放到内容的最后面( li 放到 ul 里)
（3）$("ul").prepend(li) 内部添加元素并放到内容的最前面( li 放到 ul 里)
（4）$("ul").after(li) 外部添加元素并放到内容后面( li 和 ul 是兄弟元素)
（5）$("ul").before(li) 外部添加元素并放到内容前面( li 和 ul 是兄弟元素)
（6）$("ul").remove() 可以删除匹配的元素
（7）$("ul").empty() 可以删除匹配元素里的子节点
（8）$("ul").html("") 可以删除匹配元素里的子节点