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 相关文章推荐
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
js随机生成一个验证码
Jun 01 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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 Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
flexigrid 参数说明
2010/11/23 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
图解js图片轮播效果
2015/12/20 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
Python中optparse模块使用浅析
2015/01/01 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
项目开发计划书
2014/01/09 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
交通事故代理词范文
2015/05/23 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书