JQuery概念
JQuery是一个快速的、简洁的JavaScript库。
JQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理,动画设计和Ajax交互。
JQuery本质:就是学习调用这些函数(方法)。
JQuery中的顶级对象$
1.$是JQuery的别称,在代码中可以使用JQuery代替,但一般为了方便,通常都直接使用$
2.$是JQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成JQuery对象,就可以调用JQuery的方法
JQuery的优点
1.轻量级
2.跨浏览器兼容,基本兼容了现在主流的浏览器
3.链式编程、隐式迭代
4.对事件、样式、动画支持、大大简化了DOM操作
5.支持插件扩展开发。有着丰富的第三方的插件。例如:树形菜单、日期控件、轮播图等
6.免费、开源
1.基础选择器
$("选择器")
名称 | 用法 | 描述 |
ID选择器 | $("#id") | 获取指定id的元素 |
全选选择器 | $("*") | 匹配所有元素 |
类选择器 | $(".class") | 获取同一类class的元素 |
标签选择器 | $("div") | 获取同一类标签的所有元素 |
并集选择器 | $("div,p,li") | 选取多个元素 |
交集选择器 | $("li.current") | 交集元素 |
2.层级选择器
常用的两个分为后代选择器和子代选择器
名称 | 用法 | 描述 |
子代选择器 | $("ul>li") | 使用>号,获取亲儿子层级的元素;注意:并不会获取子孙层级的元素 |
后代选择器 | $("ul li") | 使用空格,代表后代选择器,获取ul下的所有li元素,包括子孙等 |
3.属性选择器
属性选择器是制定DOM元素对应属性的一种选择器
名称 | 用法 | 描述 |
属性名称选择器 | $("A[属性名]") | 包含指定属性的选择器 |
属性选择器 | $("A[属性名='值']") | 包含指定属性等于指定值的选择器 |
复合属性选择器 | $("A[属性名='值'] []...") | 包含多个属性条件的选择器 |
4.过滤选择器
语法 | 用法 | 描述 |
:first | $("li:first") | 获取第一个li元素 |
:last | $("li:last") | 获取最后一个li元素 |
:eq(index) | $("li:eq(2)") | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始 |
:odd | $("li:odd") | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $("li:even") | 获取到的li元素中,选择索引号为偶数的元素 |
5.表单过滤选择器
名称 | 用法 | 描述 |
可用元素选择器 | :enabled | 获得可用元素 |
不可用元素选择器 | :disabled | 获得不可用元素 |
选中选择器 | :checked | 获得单选/复选框选中的元素 |
选中选择器 | :selected | 获取下拉框选中的元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单过滤器</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//按钮点击事件
$("#btn").click(function(){
var jq1=$("input:enabled");
var jq2=$("input:checked");
for(var i=0;i<jq2.length;i++){
var dom=jq2[i];
alert(dom.value);
}
});
});
</script>
</head>
<body>
<form action="#" method="post">
可用表单:<input type="text" name="name" value="" /><br />
不可用表单:<input type="text" name="id" value="编号10065" disabled="true"/><br />
单选框:<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女<br />
复选框:<input type="checkbox" name="hobby" value="唱歌" />唱歌
<input type="checkbox" name="hobby" value="rap" />rap
<input type="checkbox" name="hobby" value="篮球" />篮球<br />
下拉框:<select name="addr">
<option value="河南">河南</option>
<option value="湖北">湖北</option>
<option value="四川">四川</option>
<option value="重庆">重庆</option>
</select><br />
<button type="button" id="btn">按钮</button>
</form>
</body>
</html>