一、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("")
可以删除匹配元素里的子节点