jQuery学习总结之元素的相对定位和选择器(持续更新)


Posted in Javascript onApril 26, 2011

①jQuery元素的相对定位。
jQuery中不仅可以使用选择器就行绝对定位,而且还可以进行相对定位,只要在$()中指定第二个参数,第二个参数就是相对的元素。第二个参数传递一个jQuery对象,则相对于这个对象为基准进行相对的选择。

<html> 
<head> 
<title>jQuery元素的相对定位和选择器</title> 
<script type="text/javascript" src="jQuery-1.4.2.js"></script> 
<script> 
$(function(){ 
//将第1~3行的背景色设置为红色(绝对定位)。 
//注意此处的gt(0)是从lt(4)出的新序列中的序号开始的,而不是原来的。(即在原来的基础上进一步过滤) 
$("#t tr:lt(4):gt(0)").css("background","red"); 
$("#t tr").click(function(){ 
//Dom中的this-->jQuery 中$(this) 
//$("td",$(this))是相对该行tr下的搜有td 
$("td",$(this)).css("background","green"); 
}); 
$("tr[title=ttt ]").css("background","yellow"); 
}); 
</script> 
</head> 
<body> 
<div id="div1"> 
<table id="t"> 
<tr><td>111</td><td>A</td></tr> 
<tr><td>222</td><td>B</td></tr> 
<tr><td>333</td><td>C</td></tr> 
<tr><td>444</td><td>D</td></tr> 
<tr title="ttt"><td>555</td><td>E</td></tr> 
<tr><td>666</td><td>F</td></tr> 
<tr><td>777</td><td>G</td></tr> 
<tr><td>888</td><td>H</td></tr> 
<tr><td>999</td><td>I</td></tr> 
</table> 
<br/> 
</div> 
</body> 
</html>

运行效果图:

jQuery学习总结之元素的相对定位和选择器(持续更新)

②$("div[id]")选取有id属性的div
③$("div[title=test]")选取title属性为"test"的div。注意:一个等号。
$("div[title!=test]")选取title属性不为"test"的div
④$("input:checked")注意:input和:checked之间没有空格
$("input")和$(":input")的区别
$("input")只能取到<input>标签,而<textarea>、<select>等就不能取得了。
$(":input")不仅能取到<input>标签,而<textarea>、<select>等提交服务器的表单都能取到。
类似的$(":text")获取所有单行文本框,我们也可以通过$("input[type=text]")来实现相同的功能。类似的还有$(":passowrd")、$(":radio")、$(":checkbox")、$(":submit")、$(":image")、$(":reset")、$(":button")、$(":file")、$(":hidden")
⑥使用attr()方法读取或者设置元素的属性,对于jQuery没有的封装的属性用attr进行操作。
$("#a:first").attr("href","http://baidu.com");
⑦删除属性removeAttr,删除属性在源代码中看不到,这时和清空属性的区别。
⑧动态创建Dom节点
使用$(html字符串)来动态的创建Dom节点,并返回一个jQuery对象,然后调用append等方法将创建的节点添加到Dom中。
var link=$("<a href='http://www.baidu.com'>百度</a>");
$("div:first").append(link);
append方法用来在元素的末尾追加元素(添加子元素,成为最后一个子元素)
prepend方法在元素的开始添加元素(添加子元素,成为第一个子元素)
after方法在元素之后添加元素(添加兄弟)
before方法在元素之前添加元素(添加兄弟)
⑨删除节点
remove()删除选择的节点,该方法是返回值是被删除的节点对象,还可以继续使用被删除的节点。
 var list=$("#ulLeft li.test").remove();
 $("#ulRight").append(list);

阻止事件冒泡e.stopPropagation();
阻止默认行为:e.preventDefault()和window.event.returnValue=false效果一样

Javascript 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
JavaScript中的类继承
Nov 25 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 #Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 #Javascript
jqPlot 基于jquery的画图插件
Apr 26 #Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 #Javascript
jQuery 版元素拖拽原型代码
Apr 25 #Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 #Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 #Javascript
You might like
怎样才能成为PHP高手?学会“懒惰”的编程
2006/12/05 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
PHP生成器简单实例
2015/05/13 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
jquery实现聚光灯效果的方法
2015/02/06 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python多线程编程(五):死锁的形成
2015/04/05 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Python中实现switch功能实例解析
2018/01/11 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
行政总经理岗位职责
2013/12/05 职场文书
八年级英语教学反思
2014/01/09 职场文书
投标邀请书范文
2014/01/31 职场文书
党支部承诺书范文
2014/03/28 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
社会实践活动报告
2015/02/05 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python