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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
10个实用的脚本代码工具
May 04 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 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
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
Python中常见的数据类型小结
2015/08/29 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Python 从attribute到property详解
2020/03/05 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
应用电子技术专业个人求职信
2013/09/21 职场文书
护理专业推荐信
2013/11/07 职场文书
员工年终自我评价
2014/09/14 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
英语读书笔记
2015/07/02 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP