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 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 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
星际流派综述
2020/03/04 星际争霸
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
php实现两个数组相加的方法
2015/02/17 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[05:24]TI9采访——教练
2019/08/24 DOTA
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python如何为创建大量实例节省内存
2018/03/20 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
python梯度下降算法的实现
2020/02/24 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
公司培训欢迎词
2014/01/10 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
教师自我剖析材料
2014/09/29 职场文书
总经理年会致辞
2015/07/29 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
解析Java中的static关键字
2021/06/14 Java/Android
Go语言读取txt文档的操作方法
2022/01/22 Golang