jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--引入jQuery库-->
<script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
<script type="text/javascript">
//相当于windows.onload=function()
$(function(){
//jquery方式的 查询id为bt的标签
var $btnObj=$("#bt");
$btnObj.click(function(){
alert("jQuery的单击事件");
});
});
</script>
</head>
<body>
<button id="bt">hello</button>
</body>
</html>
$是一个函数
关于$:
-
传入参数为‘函数’时，表示页面加载完成之后，相当于window.onload=function(){}
-
传入参数为HTML字符串时，会创建这个HTML标签对象。
-
传入参数为选择器字符串时：
$("#id属性值") ：id选择器，根据id查询标签对象
$("标签名")：标签名选择器，根据指定的标签名查询标签对象
$(".class属性值")：类型选择器，可以根据class属性查询标签对象
-
传入参数为dom对象时
会把这个dom对象转换为jQuery对象。
区分dom对象和jQuery对象
DOM对象：
- 通过getElementByID()查询出来的标签对象是DOM对象
- 通过getElementsByName()查询出来的标签对象是DOM对象
- 通过getElementsByTagName()查询出来的标签对象是DOM对象
- 通过createElement()创建的对象，是DOM对象
DOM对象Alert出来的效果是[object HTML 标签名 Element]
jQuery对象
- 通过jQuery提供的API创建的对象，是jQuery对象
- 通过jQuery包装的Dom对象，也是jQuery对象
- 通过jQuery提供的API查询到的对象，是jQuery对象
jQuery对象alert出来的效果是：[object Object]
JQuery对象的本质是什么？
JQuery对象是dom对象的数组+jQuery提供的一系列功能函数
Dom对象和jQuery对象互转
1、dom对象转化为jQuery对象
- 先有dom对象
- $(DOM对象)就可以转换成jQuery对象
2、jQuery对象转化为dom对象
- 先有jQuery对象
- 通过jQuery对象的下标取出dom对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--引入jQuery库-->
<script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#bt").click(function(){
// $("#ha").css({"color":"red","background-color":"green"});
$("#ha").css("color","red");
});
});
</script>
</head>
<body>
<div id="ha">hahaha</div>
<button id="bt">点一下试试</button>
</body>
</html>
层级选择器
-
ancestor descendant
在给定的祖先元素下匹配所有的后代元素
$("form input")
含义：匹配form元素下的所有input元素
-
parent > child
在给定的父元素下匹配所有的子元素
$("form > input")
含义：匹配form元素的直接子元素input
-
prev + next
匹配所有紧接在prev元素后的next元素
$("label + input")
含义：匹配紧接在label后的input元素
-
prev ~ siblings
匹配prev元素后的所有siblings元素
$("form ~ input")
含义：匹配form元素后的所有input元素
基本过滤选择器
-
:first
获取第一个元素
$("li:first")
-
:last
获取最后一个元素
$("li:last")
-
:not(selector)
去除所有与给定选择器匹配的元素
$("input:not(:checked)")
含义：查找所有未选中的input元素
-
:even
匹配所有索引值为偶数的元素，从0开始计数
$("tr:even")
含义：查找表格的1、3、5…行（即索引值0、2、4）
-
:odd
匹配所有索引值为奇数的元素，从0开始计数
$("tr:odd")
-
:eq(index)
匹配一个给定索引值的元素，索引值从0开始计数
$("tr:eq(1)")
含义：查找第二行
-
:gt(index)
匹配所有大于给定索引值的元素
-
:lt(index)
匹配所有小于给定索引值的元素
-
:header
匹配标题元素
-
:animated
匹配当前正在执行动画的所有元素
内容过滤选择器
-
contains(text)
匹配包含给定文本的元素
-
:empty
匹配所有不包含子元素或者文本的空元素
-
:parent
匹配含有子元素或者文本的元素
-
:has(selector)
匹配含有选择器所匹配的元素的元素
$("div:has(p)")
含义：匹配含有p的div
属性选择器
-
[attribute]
匹配包含给定属性的元素
$("div[id]")
含义：查找所有含有id属性的div元素
-
[attribute=value]
匹配给定的属性是某个特定值的元素
$("input[name='newsletter']")
含义：查找所有name属性是newsletter的input元素
-
[attribute!=value]
匹配所有不含有指定的属性的元素，或者匹配属性不等于特定值的元素。
$("input[name!='newsletter']")
含义：查找所有name属性不是newsletter的input元素，并且查找没有name属性的input元素
-
[attribute^=value]
匹配给定的属性是以某些值开始的元素
$("input[name^='news']")
含义：查找所有name以news开始的input元素
-
[attribute$=value]
匹配给定的属性是以某些值结尾的元素
$("input[name$='letter']")
含义：查找所有name以letter结尾的input元素
-
[attribute*=value]
匹配给定的属性是以包含某些值的元素
$("input[name*='man']")
含义：查找所有name包含man的input元素
-
[selector1] [selector2] [selectorN]
复合属性选择器，需要同时满足多个条件时使用
$("input[id][name$='man']")
找到所有含有id属性，并且它的name属性是以man结尾的input元素