一、简介
1. 什么是jQuery
- jQuery:是一个优秀的JavaScript轻量级框架之一。
2. jQuery引入
<script src="jQuery类库的路径"></script>
<script>
</script>
二、js对象和jQuery对象转换
- js对象:js语法提供的对象,或者使用js方法得到的对象
- jQuery对象:使用jQuery方法得到的对象
- js对象转jQuery对象:
$(js对象)
- jQuery对象转js对象:
jQuery对象[索引]
或者 jQuery对象.get(索引)
var d1Js = document.getElementById("d1");
var inner = $(d1Js).html();
alert(inner);
var d1Jq = $("#d1");
var inner = d1Jq[0].innerHTML;
alert(inner);
三、选择器
1. 基本选择器
- 标签选择器:
div
表示选择所有的div元素 - ID选择器:
#d1
表示选择id为d1的元素 - 类选择器:
.c1
表示选择类名为c1的元素
| 选择器 | 描述 |
| ------------------------------------------------------- | ---------- |
| $("元素名称")
,比如:$("div")
| 标签选择器 |
| $("#id值")
,比如:$("#d1")
| ID选择器 |
| $(".类名")
,比如:$(".c1")
| 类选择器 |
| $("selector1, selector2, ...")
,比如:$("div,span")
| 并集选择器 |
2. 层级选择器
选择器 | 描述 |
---|
$("A B") | 后代选择器,获取到A的后代元素B。比如:$("div a") 找div的后代元素a |
$("A>B") | 子选择器,获取到A的子元素B。比如:$("div>a") 找div的子元素a |
$("A+B") | next选择器,获取A元素后边挨着的B元素(B是A挨着的弟弟) |
$("A~B") | siblings选择器,获取A元素后边同级所有的B元素(B是A的弟弟妹妹们) |
3. 属性选择器
选择器 | 描述 |
---|
$("A[attr]") | 获取 含有attr属性的 A元素。$("input[class]") ,找含有class属性的input标签 |
$("A[attr=v]") | 获取 attr属性值等于v的 A元素。$("input[type='text']") ,找文本框 |
$("A[][]...") | 复合属性选择器。$("input[class][type='text']") ,找有class属性的文本框 |
$("A[attr!=v]") | 获取 attr属性值不等于v的 A元素 |
$("A[attr^=v]") | 获取 attr属性值以v开头的 A元素 |
$("A[attr$=v]") | 获取 attr属性值以v结尾的 A元素 |
$("A[attr*=v]") | 获取 attr属性值里包含v的 A元素 |
4. 基本过滤选择器
选择器 | 描述 |
---|
:first | 获取第一个,$("div:first") 找第一个div |
:last | 获取最后一个,$("span:last") 找最后 一个span |
:not(selector) | 排除 selector的结果不要,$("div:not(.cls)") 找div,但是不要.cls的 |
:even | 获取索引为偶数的,$("div:even") |
:odd | 获取索引为奇数的 |
:eq(n) | 获取索引等于n的 |
:gt(n) | 获取索引大于n的 |
:lt(n) | 获取索引小于n的 |
:header | 获取所有的标题,h1~h6 |
:animated | 获取正在运行的动画 |
5. 表单属性选择器
选择器 | 描述 |
---|
:enabled | 获取可用的表单项 |
:disabled | 获取不可用的表单项 |
:checked | 获取被选中的radio(单选选项),或者checkbox(多选选项) |
:selected | 获取被选中的下拉选项option |
四、dom操作
1. 操作标签体
方法 | 参数 | 描述 |
---|
html([value]) | | 获取/设置标签体 |
text([value]) | | 获取/设置标签体里的文本 |
val([value]) | | 获取/设置表单项的值 |
html()
获取开始标签和结束标签里的所有内容;text()
获取开始标签和结束标签里的文本内容html(string)
设置的html代码会生效;text(string)
设置了html代码不生效
2. 操作属性
方法 | 参数 | 描述 |
---|
attr(name [,value]) | name:属性名称 | 获取/设置属性值 |
prop(name [,value]) | | 获取/设置属性值 |
3. 操作样式
方法 | 参数 | 描述 |
---|
css(name [,value]) | name:样式名称 | 获取/设置样式 |
addClass(className) | | 添加类名 |
removeClass(className) | | 删除类名 |
4. 操作标签
方法 | 参数 | 描述 |
---|
$("完整html代码") | | 创建标签。$("<li>WOW</li>") |
parent.append(element) | element:要插入的标签对象 | 在结尾插入element |
parent.prepend(element) | | 在开头插入element |
ele.before(element) | | 把element插入ele前面 |
ele.after(element) | | 把element插入ele后面 |
remove() | | 删除元素 |
empty() | | 清空元素 |
五、事件
基本事件绑定
jQuery与js事件写法对比
js事件写法 | jQuery事件写法 |
---|
onclick 单击 | click(fn) |
ondblclick 双击 | dblclick(fn) |
onsubmit 表单提交 | submit(fn) |
onchange 域内容改变 | change(fn) |
onload 加载完成 | $(fn) ,$(document).ready(fn) |
onfocus 获取焦点 | focus(fn) |
onblur 失去焦点 | blur(fn) |
onkeydown 键盘按键按下 | keydown(fn) |
onkeypress 键盘按键按下、按住 | keypress(fn) |
onkeyup 键盘按键弹起 | keyup(fn) |
onmousedown 鼠标按键按下 | mousedown(fn) |
onmouseup 鼠标按键弹起 | mouseup(fn) |
onmouseover 鼠标移入 | mouseover(fn) |
onmouseout 鼠标移出 | mouseout(fn) |
onmousemove 鼠标移动 | mousemove(fn) |
事件绑定与解绑
未来元素的事件
- 未来元素:事件绑定之后,再添加的新元素。普通方式是不能给未来元素绑定事件的
- 给未来元素绑定事件:
jQuery对象.on("事件名称","选择器", function(){})
$("#foodList").on("click", "li", function(){
alert(this.innerHTML);
});
- 给未来元素解绑事件:
jQuery对象.off("事件名称","选择器")
$("#foodList").off("click", "li");
六、循环遍历
1. js的循环遍历
2. jQuery的循环遍历
-
jQuery框架的each方法
var $items = $("li");
$.each($items, function(index, element){
alert("索引是:" + index + ", 当前元素内容是:" + element.innerHTML);
})
-
jQuery对象的each方法(每个jQuery对象都有each方法,是循环jQuery对象自己的)
var $items = $("li");
$items.each(function(index, element){
alert("索引是:" + index + ", 当前元素内容是:" + element.innerHTML);
});