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 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 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 异常处理实现代码
2009/03/10 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
如何用php获取文件名后缀
2013/06/09 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
Python异常处理例题整理
2019/07/07 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
工商技校毕业生自荐信
2013/11/15 职场文书
海南地接欢迎词
2014/01/14 职场文书
会计岗位描述
2014/02/22 职场文书
2014国庆节标语口号
2014/09/19 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
mysql部分操作
2021/04/05 MySQL
css height属性中的calc方法详解
2021/06/03 HTML / CSS
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js