您的位置：首页 > Web前端 > JQuery

JQuery基础知识----jQuery 对象，选择器

2016-10-05 23:54 555 查看

1.jQuery 对象和 DOM 对象

    •jQuery对象就是通过jQuery($())包装DOM对象后产生的对象
    •jQuery对象是
jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:
$(“#persontab”).html();
    •jQuery对象无法使用
DOM对象的任何方法,同样DOM对象也不能使用jQuery里的任何方法
    •约定：如果获取的是
jQuery对象,那么要在变量前面加上$.
       –var $variable=jQuery对象
       –var variable = DOM对象
jQuery对象转成DOM对象
•jQuery对象不能使用DOM中的方法,但如果jQuery没有封装想要的方法,不得不使用DOM对象的时候,有如下两种处理方法:
    •(1)jQuery对象是一个数组对象,可以通过[index]的方法得到对应的DOM对象.

•(2)使用
jQuery中的 get(index)方法得到相应的DOM对象

DOM 对象转成jQuery对象
•对于一个 DOM
对象, 只需要用$()把DOM对象包装起来(jQuery对象就是通过jQuery包装DOM对象后产生的对象),就可以获得一个jQuery对象.

转换后就可以使用jQuery中的方法了

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<!-- 导入 jQuery 库 -->
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

//$(function(){}) 相当于 window.onload, 代码卸载 {} 之间
$(function(){
//1. 选取 button: $("button")
//2. 为 button 添加 onclick 响应函数: $("button").click(function(){})
//代码编写在 function 的 {} 中.
$("button").click(function(){
//3. 点哪个按钮就弹出哪个按钮的文本 ClickM或者ClickMe2
alert($(this).text());
//jQuery 和 DOM 对象
//1. 由 jQuery 对象转为 DOM 对象
//  1). 获取一个 jQuery 对象
var $btn = $("button");
//  2). jQuery 对象是一个数组.
alert($btn.length); //-->2
//  3). 可以通过数组的下标转为 DOM 对象
alert($btn[1].firstChild.nodeValue); //ClickMe2

//2. 由 DOM 对象转为 jQuery 对象
//  1). 选取一个 DOM 对象
var btn = document.getElementById("btn");
//  2). 把 DOM 对象转为一个 jQuery 对象: 使用 $() 进行包装
alert("--" + $(btn).text())  //--ClickMe
});

})

</script>

</head>
<body>
<button id="btn">ClickMe</button>
<br>
<button>ClickMe2</button>
</body>
</html>

2.jQuery选择器

•选择器是 jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器
•jQuery选择器的优点:
–简洁的写法

–完善的事件处理机制

2-1.基本选择器

•基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用).

而ID类和CLASS类的区别就是，ID在一个网页中只能被引用一次，而CLASS类可以被多次引用。

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2-2.层次选择器

•如果想通过DOM
元素之间的层次关系来获取特定元素,
例如后代元素, 子元素,相邻元素,兄弟元素等,则需要使用层次选择器.

    •注意:
(“prev ~ div”)
选择器只能选择 “# prev ”元素后面的同辈元素;而jQuery中的方法siblings()与前后位置无关,只要是同辈节点就可以选取

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2-3.过滤选择器

    •过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,该选择器都以“:”开头
    •按照不同的过滤规则,
过滤选择器可以分为基本过滤,
内容过滤, 可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器.

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2-4.内容过滤选择器

•内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2-5.可见性过滤选择器

•可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素
•

    •可见选择器:hidden不仅包含样式属性display为none的元素,也包含文本隐藏域(<input type=“hidden”>)和visible:hidden之类的元素
测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2-6.属性过滤选择器

     •属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2-7.子元素过滤选择器

•nth-child()选择器详解如下：
    –(1):nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
    –(2):nth-child(2):能选取每个父元素下的索引值为2的元素
    –(3):nth-child(3n):能选取每个父元素下的索引值是3的倍数的元素
    –(3):nth-child(3n+1):能选取每个父元素下的索引值是3n +1的元素
测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2-8.表单对象属性过滤选择器
    •此选择器主要对所选择的表单元素进行过滤

10.表单选择器

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

3.一个练习

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JQuery 选择器

相关文章推荐

新的分享

章节导航