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模拟页面加载进度条的实现代码
Dec 19 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
javascript生成大小写字母
Jul 03 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 Javascript
如何制作自己的原生JavaScript路由
May 05 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 静态页面中显示动态内容
2009/08/14 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
jquery中append()与appendto()用法分析
2014/11/14 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
详谈python read readline readlines的区别
2017/09/22 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
wxpython绘制圆角窗体
2019/11/18 Python
python实现四人制扑克牌游戏
2020/04/22 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
"引用"与指针的区别是什么
2016/09/07 面试题
如何进行Linux分区优化
2016/09/13 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
业务员岗位职责范本
2013/12/15 职场文书
员工合理化建议书
2014/05/19 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
怒海潜将观后感
2015/06/11 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书