小色帝
- 浏览: 67569 次
-
文章分类
最新评论
-
小色帝：
我是天才是打发
Jquery实现的Tabs页 -
小色帝：
小色帝 写道1111而温热
Jquery实现的Tabs页 -
小色帝：
1111而温热
Jquery实现的Tabs页
这个标题似乎有些奇怪，但这些都是合法有效的jQuery选择器。在这里将他们逻列一起，是因为他们比较容易引起混淆。下面就通过例子来说明他们之间的不同之处。
$("parent > child")
[html] view plain copy
<div>
<span>123</span>
<p>
<span>456</span>
</p>
<span>789</span>
</div>
[javascript] view plain copy
$('div > span').css('color', '#FF0000');
结果显示如下：
123
456
789
这样理解：在parent的儿子辈中找child。这里div有三个儿子：span p和span，> 表示仅在div的儿子辈中查找。这里<span>456</span>不符合条件，因为他是div的孙子辈（二公子p的儿子）。
它等同于$("parent").children("child");
$("A B")
[html] view plain copy
<form>
<label>Name:</label>
<input name="name" value="a" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="b" />
</fieldset>
</form>
<input name="a1" value='c' />
<div>789</div>
<input name="a2" value='d' />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="e" />
</fieldset>
[javascript] view plain copy
$("form input").css('color', '#FF0000');
//它也等同于：$("input","form").css('color','#ff0000');这在下面会有讲解
//也等同于：$("form").find("input").css('color', '#FF0000');
设置form中的所有input为红色。祖先为form，子孙为input。也可以理解，只要在form的后代中有input，就符合条件。思考一下与：$("form > input").css('color','#ff0000')的区别。
它等同于：$("A").find("B")
$("div#test")
中间没有空格，表示是“且”的关系。$("div#test")意思是所有的div且id=test的元素。在看个例子：$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素。
例1：
[html] view plain copy
<div>
<span class="test">123</span>
<p>
<span class="test">456</span>
</p>
<span>789</span>
<div class="test">abc</div>
</div>
[javascript] view plain copy
$("span.test").css('color', '#FF0000');
结果如下：
123
456
789
abc
例2：
[html] view plain copy
<div>
<span class="intro">123</span>
<p>
<span class="intro demo">456</span>
</p>
<span>789</span>
<div class="demo">abc</div>
</div>
[javascript] view plain copy
$(".intro.demo") .css('color', '#FF0000');
结果如下所示：
123
456
789
abc
例3：
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("div,#test")
一个双引号中用逗号分隔不同的选择器，称之为并列选择器。
[html] view plain copy
<div>123</span>
<div style="border:1px solid #ccc;">
<span id="test">456</span>
</div>
[javascript] view plain copy
$('div,#test').css('color', '#FF0000');
结果如下图所示：
将div、id="test"元素设为红色字体。
$(".test","div")
这个看似有些奇特，它与上面的并列选择器虽然相似，但有本质的不同。其实这里的第二个参数"div"是限定查找.test的范围。
先看个简单例子：
[html] view plain copy
<div>
<span class="test">123</span>
</div>
<span class="test">456</span>
[javascript] view plain copy
$(".test","div").css('color', '#FF0000');
结果为：
123
456
在看个稍微复杂一点的例子：
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="http://lock.5186.me/js/jQuery1.6.2.js"></script>
<script>
$(document).ready(function(){
$(".del").click(function(){
id=$("input[name='id']",$(this).parents("form:first")).val();
alert(id);
});
});
</script>
</head>
<body>
<table width="100%">
<tr style="text-align:center;">
<td>1</td>
<td>218.11.56.*</td>
<td>16:51 2012-10-30</td>
<td><form><input type="hidden" name="id" value="1" /><span class="del">删除</span></form></td>
</tr>
<tr style="text-align:center;">
<td>2</td>
<td>218.11.56.*</td>
<td>16:59 2012-10-30</td>
<td><form><input type="hidden" name="id" value="2" /><span class="del">删除</span></form></td>
</tr>
</table>
</body>
</html>
你会发现，点击不同数据的删除，会弹出当前数据的ID值。
jQuery()函数有三种用法。利用选择器进行的操作只是其中的一种用法。其语法为：
jQuery(selector, [context])
这种用法还包含了四种用法。
设置选择器环境
接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器
一般情况对jquery的选择器的用法，都是做为第一个参数的用法。其实jquery()函数的这种用法还可以传递第二个参数。传递这个参数的目的是将前面选择器限定在context这个环境中。在默认情况下，即不传第二个参数，选择器从文档根部对 DOM 进行搜索（$()将在当前的HTML document中查找DOM元素）；如果指定了第二个参数，如一个DOM元素集或jquery对象，那就会在这个context中查找。
下面看个例子
[javascript] view plain copy
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
由于我们已经将 span 选择器限定到 this 这个环境中，只有被点击元素中的 span 会得到附加的class。在内部，选择器环境是通过 .find() 方法实现的，因此 $("span", this) 等价于 $(this).find("span")。
这里结合一下去掉的一个项目做说明：
[html] view plain copy
下面这个tr有N个，这里只列出一个做为演示
<tr style="text-align:center;">
<td><input type="checkbox" name="checkbox" value="$arr[id]" /></td>
<td>$arr[id]</td>
<td>$arr[log]</td>
<td>$arr[ip]</td>
<td>$arr[time]</td>
<td><form><input type="hidden" name="id" value="$arr[id]" /><span class="del">删除</span></form></td>
</tr>
[javascript] view plain copy
//del event
$(".del").bind("click",function(event){
var _tmpQuery=$(this);//为什么要加上这一句？
var id=$("input[name='id']",$(this).parents("form:first")).attr("value");//要关注的就是这一句，获取当前点击“删除”信息的ID
art.dialog.confirm('你确认删除该日志吗？',function(){
$.post("myRun/managerlog_del.php",{id:id},function(tips){
if(tips=='ok'){
art.dialog.tips('成功删除');
$(_tmpQuery.parents('tr:first')).hide();//如果不加第一句，这里用$(_tmpQuery.parents('tr:first')).hide();则不会隐藏。因为这里的this，并不是当前的class="del"这个DOM对象了。而是jQuery的AJAX配置对象ajaxSettings。测试：alert(this.url); 大头爸爸注：现在处理这个隐藏有更好的方案，详细请访问：
}else{
art.dialog.tips(tips,5);
}
});
return true;
});
});
现在，终于明白了var id=$("input[name='id']",$(this).parents("form:first")).attr("value");的来龙去脉。它的意思是在被点击元素最近的父元素开始向外寻找第一个form元素，这个jquery对象就做为前面input[name='id']的范围。实际上在<form><input type="hidden" name="id" value="$arr[id]" /><span class="del">删除</span><img src="images/del.gif" width="16" height="16" /></form>中，input[name='id']是唯一的，即只有一个name值等于id的input，只有一个。
更多了解请访问：http://www.w3school.com.cn/jquery/core_jquery.asp
那么，在看一下jQuery(selector, [context])，这种用法的第二个用法：克隆 jQuery 对象
在上面例子中有这样一句：$(_tmpQuery.parents('tr:first')).hide();
在其它页面中，有这样的句子：$($(this).parents('form:first')).serialize()。完整代码如下：
[javascript] view plain copy
//edit event
$(".edit").click(function(){
art.dialog.open('manager_edit_control.php?'+$($(this).parents('form:first')).serialize(),{id:'edit',title:'管理员修改',lock:true,resize:false},false);
});
用法 3 ：克隆 jQuery 对象
语法
jQuery(jQuery object)
当以参数的形式向 $() 函数传递 jQuery 对象后，会创建一个该对象的副本。与初始对象一样，新的 jQuery 对象引用相同的 DOM 元素。
完全可以将上面代码改为：
_tmpQuery.parents('tr:first').hide();
$(this).parents('form:first').serialize()
$("parent > child")
[html] view plain copy
<div>
<span>123</span>
<p>
<span>456</span>
</p>
<span>789</span>
</div>
[javascript] view plain copy
$('div > span').css('color', '#FF0000');
结果显示如下：
123
456
789
这样理解：在parent的儿子辈中找child。这里div有三个儿子：span p和span，> 表示仅在div的儿子辈中查找。这里<span>456</span>不符合条件，因为他是div的孙子辈（二公子p的儿子）。
它等同于$("parent").children("child");
$("A B")
[html] view plain copy
<form>
<label>Name:</label>
<input name="name" value="a" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="b" />
</fieldset>
</form>
<input name="a1" value='c' />
<div>789</div>
<input name="a2" value='d' />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="e" />
</fieldset>
[javascript] view plain copy
$("form input").css('color', '#FF0000');
//它也等同于：$("input","form").css('color','#ff0000');这在下面会有讲解
//也等同于：$("form").find("input").css('color', '#FF0000');
设置form中的所有input为红色。祖先为form，子孙为input。也可以理解，只要在form的后代中有input，就符合条件。思考一下与：$("form > input").css('color','#ff0000')的区别。
它等同于：$("A").find("B")
$("div#test")
中间没有空格，表示是“且”的关系。$("div#test")意思是所有的div且id=test的元素。在看个例子：$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素。
例1：
[html] view plain copy
<div>
<span class="test">123</span>
<p>
<span class="test">456</span>
</p>
<span>789</span>
<div class="test">abc</div>
</div>
[javascript] view plain copy
$("span.test").css('color', '#FF0000');
结果如下：
123
456
789
abc
例2：
[html] view plain copy
<div>
<span class="intro">123</span>
<p>
<span class="intro demo">456</span>
</p>
<span>789</span>
<div class="demo">abc</div>
</div>
[javascript] view plain copy
$(".intro.demo") .css('color', '#FF0000');
结果如下所示：
123
456
789
abc
例3：
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("div,#test")
一个双引号中用逗号分隔不同的选择器，称之为并列选择器。
[html] view plain copy
<div>123</span>
<div style="border:1px solid #ccc;">
<span id="test">456</span>
</div>
[javascript] view plain copy
$('div,#test').css('color', '#FF0000');
结果如下图所示：
将div、id="test"元素设为红色字体。
$(".test","div")
这个看似有些奇特，它与上面的并列选择器虽然相似，但有本质的不同。其实这里的第二个参数"div"是限定查找.test的范围。
先看个简单例子：
[html] view plain copy
<div>
<span class="test">123</span>
</div>
<span class="test">456</span>
[javascript] view plain copy
$(".test","div").css('color', '#FF0000');
结果为：
123
456
在看个稍微复杂一点的例子：
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="http://lock.5186.me/js/jQuery1.6.2.js"></script>
<script>
$(document).ready(function(){
$(".del").click(function(){
id=$("input[name='id']",$(this).parents("form:first")).val();
alert(id);
});
});
</script>
</head>
<body>
<table width="100%">
<tr style="text-align:center;">
<td>1</td>
<td>218.11.56.*</td>
<td>16:51 2012-10-30</td>
<td><form><input type="hidden" name="id" value="1" /><span class="del">删除</span></form></td>
</tr>
<tr style="text-align:center;">
<td>2</td>
<td>218.11.56.*</td>
<td>16:59 2012-10-30</td>
<td><form><input type="hidden" name="id" value="2" /><span class="del">删除</span></form></td>
</tr>
</table>
</body>
</html>
你会发现，点击不同数据的删除，会弹出当前数据的ID值。
jQuery()函数有三种用法。利用选择器进行的操作只是其中的一种用法。其语法为：
jQuery(selector, [context])
这种用法还包含了四种用法。
设置选择器环境
接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器
一般情况对jquery的选择器的用法，都是做为第一个参数的用法。其实jquery()函数的这种用法还可以传递第二个参数。传递这个参数的目的是将前面选择器限定在context这个环境中。在默认情况下，即不传第二个参数，选择器从文档根部对 DOM 进行搜索（$()将在当前的HTML document中查找DOM元素）；如果指定了第二个参数，如一个DOM元素集或jquery对象，那就会在这个context中查找。
下面看个例子
[javascript] view plain copy
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
由于我们已经将 span 选择器限定到 this 这个环境中，只有被点击元素中的 span 会得到附加的class。在内部，选择器环境是通过 .find() 方法实现的，因此 $("span", this) 等价于 $(this).find("span")。
这里结合一下去掉的一个项目做说明：
[html] view plain copy
下面这个tr有N个，这里只列出一个做为演示
<tr style="text-align:center;">
<td><input type="checkbox" name="checkbox" value="$arr[id]" /></td>
<td>$arr[id]</td>
<td>$arr[log]</td>
<td>$arr[ip]</td>
<td>$arr[time]</td>
<td><form><input type="hidden" name="id" value="$arr[id]" /><span class="del">删除</span></form></td>
</tr>
[javascript] view plain copy
//del event
$(".del").bind("click",function(event){
var _tmpQuery=$(this);//为什么要加上这一句？
var id=$("input[name='id']",$(this).parents("form:first")).attr("value");//要关注的就是这一句，获取当前点击“删除”信息的ID
art.dialog.confirm('你确认删除该日志吗？',function(){
$.post("myRun/managerlog_del.php",{id:id},function(tips){
if(tips=='ok'){
art.dialog.tips('成功删除');
$(_tmpQuery.parents('tr:first')).hide();//如果不加第一句，这里用$(_tmpQuery.parents('tr:first')).hide();则不会隐藏。因为这里的this，并不是当前的class="del"这个DOM对象了。而是jQuery的AJAX配置对象ajaxSettings。测试：alert(this.url); 大头爸爸注：现在处理这个隐藏有更好的方案，详细请访问：
}else{
art.dialog.tips(tips,5);
}
});
return true;
});
});
现在，终于明白了var id=$("input[name='id']",$(this).parents("form:first")).attr("value");的来龙去脉。它的意思是在被点击元素最近的父元素开始向外寻找第一个form元素，这个jquery对象就做为前面input[name='id']的范围。实际上在<form><input type="hidden" name="id" value="$arr[id]" /><span class="del">删除</span><img src="images/del.gif" width="16" height="16" /></form>中，input[name='id']是唯一的，即只有一个name值等于id的input，只有一个。
更多了解请访问：http://www.w3school.com.cn/jquery/core_jquery.asp
那么，在看一下jQuery(selector, [context])，这种用法的第二个用法：克隆 jQuery 对象
在上面例子中有这样一句：$(_tmpQuery.parents('tr:first')).hide();
在其它页面中，有这样的句子：$($(this).parents('form:first')).serialize()。完整代码如下：
[javascript] view plain copy
//edit event
$(".edit").click(function(){
art.dialog.open('manager_edit_control.php?'+$($(this).parents('form:first')).serialize(),{id:'edit',title:'管理员修改',lock:true,resize:false},false);
});
用法 3 ：克隆 jQuery 对象
语法
jQuery(jQuery object)
当以参数的形式向 $() 函数传递 jQuery 对象后，会创建一个该对象的副本。与初始对象一样，新的 jQuery 对象引用相同的 DOM 元素。
完全可以将上面代码改为：
_tmpQuery.parents('tr:first').hide();
$(this).parents('form:first').serialize()
分享到：
发表评论
-
项目里 Jquery 日期空间,vilidation,highchars控件
2017-03-06 11:24 0项目中用到了一个Jquery 日期控件，挺好用的，特意总结下 ... -
jquery常用事件（整理）
2017-02-13 17:47 268Jquery事件 (一)、事件 ... -
开源轻量级移动端友好的JS地图库——leaflet学习教程
2017-01-05 18:57 1185开源轻量级移动端友好的JS地图库——leaflet学习教程 ... -
type=＂button＂ ,＂submit＂ 的区别（转）
2016-07-22 11:16 486type=＂button＂ ,＂submit＂ 的区别 ... -
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2016-07-21 14:10 414Jquery中$.get(),$.post(),$.a ... -
Ztree用法事例
2016-05-17 01:11 527【简介】 zTree 是利用 jQuery 的核心代码，实现一 ... -
jQuery 数据缓存data(name, value)详解及实现
2016-05-16 10:35 422本文要讨论的是最流行的JavaScript框架jQuery的数 ... -
jQuery数据缓存$.data 的使用以及源码解析
2016-05-16 00:49 431jQuery数据缓存$.data 的使用以及源码解析 实现原 ... -
jQuery.data()
2016-05-16 00:48 327jQuery.data() 所属分类：数据操作 | 工具类 E ... -
jQuery之AJAX
2016-05-16 00:16 400jQuery之AJAX 一、load() 加载页面数据 ... -
JQuery OrgChart
2016-05-15 12:36 567Query OrgChart 是一个jQuery插件能够让帮你 ... -
JS横向树（组织结构）
2016-05-15 11:19 2918最近看到不少人有类似的需求，实现组织架构的横向展开，显示，无聊 ... -
我也来说说怎么封装jQuery插件
2016-05-14 19:32 400http://www.w3cfuns.com/notes/17 ... -
echarts 各个属性意义注释
2016-05-14 18:27 1073<!DOCTYPE html PUBLIC " ... -
jQuery插件原来如此简单 jQuery插件的机制及实战
2016-05-14 01:00 478jQuery插件原来如此简单 ... -
Echarts 仪表盘实例
2016-05-14 00:51 5277HTML 首先引入Echarts，然后在需要放置图表的地方加上 ... -
Jquery封装对象实例
2016-05-14 00:48 567jQuery自定义类封装 jQuery自定义类封装： ( ... -
Jquery 选择器总结
2015-04-15 19:21 513jQuery 的选择器可谓之强 ... -
关于SS框架后台代码开发规范实例
2013-02-01 17:20 1005工作半年了，接触的第一个项目就是SS为后台的框架的开发。 ... -
jquery 里面的.find() .each() .parent() .value(parseInt())
2013-02-01 09:33 20271.find() 方法获得当前元素集合中每个元素的后代，通过选 ...
相关推荐
2. `parent > child`：选取父元素下的子元素，例如`$("div > span")`会选择所有作为`<div>`直接子元素的`<span>`。 **过滤选择器**： 过滤选择器用于进一步筛选出符合特定条件的元素。 - **基本过滤选择器**： - ...
2. **parent > child**：选取父元素下的子元素。`$("div > span")`选取所有直接作为`<div>`子元素的`<span>`。 3. **prev + next**：选取紧跟在`prev`元素后的`next`元素。`$(".one + div")`选取紧跟在类名为`one`的...
4. **通过元素层级关系**：例如`$("parent > child")`，选择直接子元素；`$("ancestor descendant")`选择所有后代元素。 5. **通过DOM或XPath条件**：这些条件可以是属性选择器（如`$("[name]")`）、位置选择器（如`...
- `parent > child`：选取父元素下的子元素，如`$("div > span")`选取`<div>`元素下的直接子元素`<span>`。 - `prev + next`：选取紧接在`prev`元素后的`next`元素，如`$(".one + div")`选取class为`one`的元素...
- `$('parent>child')`：选取父元素`parent`的直接子元素`child`。例如，`$('div>span')`会选择所有`<div>`下的直接子`<span>`元素。 - `$('prev+next')`：选取紧跟在`prev`元素后面的`next`元素。例如，`$('.one+...
- **层级关系选择器**：例如`$("parent > child")`用于选取父元素直接下的子元素。 - **DOM或XPath条件选择器**：更复杂的条件选择，例如`$("element:visible")`用于选取所有可见的元素。 通过这些选择器返回的对象...
- `$("#ID #ID")`：通过嵌套 ID 选择元素，如 `$("#parent #child")` 会选择 ID 为 "parent" 的元素内的 ID 为 "child" 的元素。 - `$(".class 样式名")`：通过类名选择元素，如 `$(".myClass")` 会选择所有包含 ...
- **子元素选择器**：`$("parent > child")` - 仅匹配`parent`元素的直接子元素中的`child`元素。例如，`$("div > span")`选取`<div>`元素下的直接子元素`<span>`。 - **相邻兄弟选择器**：`$("prev + next")` - ...
格式为`$("parent>child")`，例如`$("div>span")`会选择`<div>`元素内部直接的`<span>`子元素。 - 相邻兄弟选择器：选取紧接在某个元素之后的同级元素。格式为`$("prev+next")`，例如`$("div+span")`会选择`<div>`...
- **层级关系选择器:** `$("#parent > .child")` - **复杂条件选择器:** 使用属性选择器、子元素选择器等组合使用 **注意:** jQuery 对象不能直接调用 DOM API 方法。例如，`$("div").appendChild()` 是不正确的，...
return this.optional(element) || /^[a-zA-Z0-9_]+$/.test(value); }, '只能包含字母、数字和下划线'); ``` --- #### 八、Pagination（分页控件） **8.1 概述** Pagination 是一个用于分页显示数据的组件。 *...
- **parent > child**: 选择直接子元素。 **示例**: ```javascript // 选择 form 元素下的所有 input 元素 $('form input'); // 选择 p 元素下的直接子元素 span $('p > span'); ``` 通过上述介绍可以看出，...
- **parent > child**：选取指定父元素的直接子元素。 - **实例**：同上 - **JQuery代码**：`$("form > input")` - **结果**：`[<input name="name"/>]` - **prev + next**：选取紧跟在特定元素后的下一个兄弟...
<p>one</p> <div><p>two</p></div> <p>three</p> jQuery 代码: $("div > p"); 结果: [ <p>two</p> ] -------------------------------------------------------------------------------- 在文档的第一个表单...
- `parent > child`：选取父元素的直接子元素，`$(".myList>li")`选取所有`.myList`类元素的直接子`<li>`。 - `prev + next`：选取`prev`元素后的第一个`next`元素，如`$("#hibiscus+img")`选取ID为`hibiscus`元素...
var a = document.getElementById("test").getElementsByTagName("div"); ``` 然而，Firefox（FF）浏览器会将换行视为一个元素，因此在FF下，`childNodes`的长度可能会多出一个。为了解决这个问题，我们需要编写一...
5. **子元素选择器**: 使用`$("parent > child")`来选择父元素的直接子元素，如`$("div > p")`会选择所有直接嵌套在div元素内的p元素。 6. **相邻兄弟选择器**: 使用`$("prev + next")`来选择紧接在prev元素后的...