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 switch case default 的用法示例介绍
Oct 23 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
JS面向对象编程详解
Mar 06 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
vue中轮训器的使用
Jan 27 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
php上传、管理照片示例
2006/10/09 PHP
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
详解php的socket通信
2015/08/11 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
Python实现配置文件备份的方法
2015/07/30 Python
详解Python3中yield生成器的用法
2015/08/20 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Django model反向关联名称的方法
2018/12/15 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
详解Python文件修改的两种方式
2019/08/22 Python
如何利用python进行时间序列分析
2020/08/04 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
建议书怎么写
2014/03/12 职场文书
读书小明星事迹材料
2014/05/03 职场文书
商家认证委托书格式
2014/10/16 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
同学会感言
2015/07/30 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL