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 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
学习ExtJS(二) Button常用方法
Oct 07 Javascript
js操作二级联动实现代码
Jul 27 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
javascript截取字符串小结
Apr 28 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
python实现socket端口重定向示例
2014/02/10 Python
python列表去重的二种方法
2014/02/14 Python
python递归计算N!的方法
2015/05/05 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
简单了解python模块概念
2018/01/11 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
Python3标准库总结
2019/02/19 Python
浅谈Python爬虫基本套路
2019/03/25 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
编辑求职信样本
2013/12/16 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS