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+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
详解JS数组方法
Nov 20 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
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
python继承和抽象类的实现方法
2015/01/14 Python
python中logging库的使用总结
2017/10/18 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
python正则表达式实例代码
2020/03/03 Python
keras输出预测值和真实值方式
2020/06/27 Python
web页面录屏实现
2019/02/12 HTML / CSS
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
科级干部考察材料
2014/02/15 职场文书
人事专员职责
2014/02/22 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
宾馆卫生管理制度
2015/08/06 职场文书