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生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
JS如何定义用字符串拼接的变量
Jul 11 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
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
一段实用的php验证码函数
2016/05/19 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
python中的函数用法入门教程
2014/09/02 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
入党介绍人评语
2014/05/06 职场文书
书法大赛策划方案
2014/06/04 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
地道战观后感2000字
2015/06/04 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js