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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 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
php和nginx交互实例讲解
2019/09/24 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
javascript整除实现代码
2010/11/23 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
医药工作岗位求职信分享
2013/12/31 职场文书
教师评优事迹材料
2014/01/10 职场文书
狼和鹿教学反思
2014/02/05 职场文书
保安队长职务说明书
2014/02/23 职场文书
交通事故协议书
2014/04/15 职场文书
项目备案申请报告
2015/05/15 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
python turtle绘图命令及案例
2021/11/23 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript