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封装的不错的选项卡效果代码
Feb 15 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
jQuery表单验证之密码确认
May 22 jQuery
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
PHP页面实现定时跳转的方法
2014/10/31 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
js简单抽奖代码
2015/01/16 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
django修改models重建数据库的操作
2020/03/31 Python
Django实现随机图形验证码的示例
2020/10/15 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
车间组长岗位职责
2013/12/20 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
物业保安员岗位职责
2014/03/14 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python