jQuery 1.0 | 选择器 | 事件 | 操作样式 | 操作属性
使用jQuery:
1,下载jQuery
http://jquery.com/download/
2,引入jQuery文件
3,定义入口函数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script src="jquery-1.12.2.js"></script> <script> // 第一种: $(document).ready(function (){ // jQuery代码 }); //第二种: $(function (){ // jQuery代码 }); </script>
选择器:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 基本选择器 $('#btn') //id $('div') //标签 $('.className') //类 $('li.green') //交集 $('div,span') //并集 层级选择器 $('#father>p') //子代选择器 $('#father p') //后代选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 过滤选择器: $('li:even') // 获取下标为偶数 $('li:odd') // 获取下标为奇数 $('li:first') // 获取第一个 $('li:last') // 获取最后一个 $('li:eq(index)') // 指定下标 $('li:gt(index)') // 大于下标 $('li:lt(index)') // 小于下标
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 以下是方法 // 筛选选择器 children(selector) //子类选择器 find(selector) // 后代选择器 siblings(selector) // 查找兄弟节点,不包括自己本身。 parent() // 查找父亲 eq(index) // 找指定下标,index从0开始 next() // 找下一个兄弟 prev() // 找上一次兄弟 $(“ul”).children(“li”)相当于$(“ul>li”), $(“ul”).find(“li”);相当于$(“ul li”), $(“#first”).siblings(“li”); $(“#first”).parent(); $(“li”).eq(2);相当于$(“li:eq(2)”), $(“li”).next() $(“li”).prev()
事件:
mouseover 和mouseenter的相同之处都是鼠标的进入事件,不同的是,mouseover(parent元素绑定鼠标进入事件,当鼠标进入child元素时也会触发事件,简单来说:外层元素有点击事件,点击内层元素也会触发外层的事件),mouseenter不会有这种冒泡行为,所以mouseenter它效率高
1,mouseover() 鼠标进入
1,mouseout() 鼠标离开
2,mouseenter() 鼠标进入
2,mouseleave() 鼠标离开
使用时:mouseover和mouseout一对,mouseenter和mouseleave一对!
click() 点击
操作样式:
js中修改样式有两种:
1,通过设置className // 有权重问题(因为写在style标签中)
2,style // 这个不需要担心权重的问题(因为是行内的)
.css()操作:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 设置一个样式属性值 $('div').css(name, val); // 设置多个样式属性值 $('div').css({name1: val1, name2: val2}) // 获取样式值,return: val $('div').css(name)
隐式迭代:
设置的时候:会把jq内部的所有对象都设置上相同的值
获取的时候:只会返回第一个元素对应的值
.class()操作:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.addClass(name) // 添加一个类(不会删除之前的类) .removeClass(name) // 移除类 .hasClass(name) // 判断有没有这个类,返回值为boolean值 .toggleClass(name) // 有则删除,无则创建。(如果有这个类的话就删除,没有这个类的话就添加)
操作属性:
.attr() 方法:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// atrr可以设置自定义属性 .attr(name, val) // 设置单个属性值 .attr({name1: val1, name2: val2}) // 设置多个属性值 .attr(name) // 获取属性值
使用attr方法操作布尔属性值,只能操作一次(这是jQuery的问题),所以应该使用prop方法
.prop()方法:
对于布尔类型的属性使用prop()