JQuery魔力之$("tagName")与selector


Posted in Javascript onMarch 05, 2012

JQuery魔力(一)$("tagName")

DOM 中的 getElementsByTagName()方法在JQuery中的表现就是$("tagName")这么简单!

匿名函数来解决 window.onload 事件

对页面上的所有"div"标记下手,定义统一的外观

对"body"标记定义外观

动态添加一个"span"标记将其放置在"body"里

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>JQuery 测试</title> 
<script src="js/jquery-1.7.1.min.js" type="text/javascript"> 
</script> 
<script type='text/javascript'> 
$(function () { 
$("div").width(100) 
.css("color", "red") 
.css("margin", "20px") 
.css("border", "dotted 1px green"); 
$(document.body).css("background-color", "#cccccc"); 
$("<span>Four</span>").appendTo("body"); 
}); 
</script> 
<script type="text/javascript"> 
$(function () { 
var v = $("div"); 
alert(v.length); 
for (var i = 0; i < v.length; i++) { 
alert(v[i].innerHTML); 
} 
}); 
</script> 
</head> 
<body> 
<div> 
第一个div</div> 
<div> 
第二个div</div> 
<div> 
第三个div</div> 
</body> 
</html>

JQuery魔力(二) selector
tag标签(可以是:p、div、button …)标签本身具有ID、Class等属性
$("tag") //取得页面中的某种标签的集合 同 document.getElementsByTagName("tag") 
$("#id") //据id取得页面中的元素 同 document.getElementById("id") 
$("tag#id") //据id取得标签为tag元素集合 
$(".class") //据class取得元素集合 同 document.getElementsByClassName("class") 
$("tag.class") //据class取得标签为tag的元素集合 
$("tag1 tag2") //取得tag1内的tag2类型元素 同 
$("tag1 > tag2") 
$("tag1:has(tag2)") //取得包含tag2的tag1类型的元素集合

上面的selector充分体现了JQuery存在的价值,就是语法简洁且语义容易理解。
Javascript 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 #Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 #Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 #Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 #Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 #Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 #Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 #Javascript
You might like
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
PHP 地址栏信息的获取代码
2009/01/07 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
PHP xpath()函数讲解
2019/02/11 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
vue中appear的用法
2017/08/17 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python中的装饰器用法详解
2015/01/14 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
销售行业个人求职自荐信
2013/09/25 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
班长自荐书范文
2014/02/11 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
建筑学专业自荐书
2014/07/09 职场文书
英语教师个人总结
2015/02/09 职场文书
教师考核表个人总结
2015/02/12 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
如何撰写创业策划书
2019/06/27 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python