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 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
详解vue 组件
Jun 11 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 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函数解决SQL injection
2006/12/09 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
PHP钩子实现方法解析
2019/05/21 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
PHP7 新增功能
2021/03/09 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python读取properties配置文件操作示例
2018/03/29 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
python数值基础知识浅析
2019/11/19 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Python itertools.product方法代码实例
2020/03/27 Python
详解python with 上下文管理器
2020/09/02 Python
数控技术专科生自我评价
2014/01/08 职场文书
新兵入伍心得体会
2014/09/04 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android
MySQL 数据 data 基本操作
2022/05/04 MySQL
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python