第3章： jQuery基本语法、选择器

练习-制作帮助中心问答特效
需求说明

点击标题后，显示回答的内容，同时标题加上背景色
DOM对象转jQuery对象
使用$()函数进行转化：$(DOM对象)
var txtName =document.getElementById("txtName"); //DOM对象 var $txtName =$(txtName); //jQuery对象
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
jQuery基本语法
使用jQuery弹出提示框
<script> $(document).ready(function() { alert("我欲奔赴沙场征战jQuery，势必攻克之！"); }); </script> 为页面加载事件绑定方法
名称 标签选择器 类选择器 ID选择器
根据给定的标签名匹配 $("h2" )选取所有h2元 元素 素 根据给定的class匹配 元素 根据给定的id匹配元素
并集选择器
交集选择器
全局选择器
$(" .title")选取所有 class为title的元素 #id $(" #title")选取id为 title的元素 selector1,sele 将每一个选择器匹配的 $("div,p,.title" )选取所 ctor2,...,select 元素合并后一起返回 有div、p和拥有class orN 为title的元素 element.class 匹配指定class或id的某 $("h2.title")选取所有拥 或element#id 元素或元素集合 有class为title的h2元 素 * 匹配所有元素 $("*" )选取所有元素
jQuery选择器
jQuery选择器类似于CSS选择器，用来选取网页中的元素
$("h3").css("background","#09F");

获取并设置网页中所有<h3>元素的背景 “h3”为选择器语法，必须放在$()中


$(“h3”)返回jQuery对象
css()是为jQuery对象设置样式的方法
注意
jQuery对象命名一般约定以$开头
在事件中经常使用$(this)，this是触发该事件的对象
jQuery对象转DOM对象
jQuery对象是一个类似数组的对象，可以通过[index]的
方法得到相应的DOM对象
var $txtName =$ ("#txtName"); var txtName =$txtName[0];
jQuery
第三章： 基本语法、选择器
目录
jQuery的基本语法 jQuery对象与DOM对象的相互转换 使用jQuery实现简单特效 选择器


基本选择器
层次选择器 属性选择器


基本过滤选择器
可见性过滤选择器
jQuery简介
jQuery由美国人John
Resig于2006年创建 jQuery是目前最流行的JavaScript程序库，它是对 JavaScript对象和函数的封装
$("#title").html( ); 等同于 document.getElementById("title").innerHTML;
jQuery语法结构
语法
$(selector).action() ;

工厂函数$()：将DOM对象转化为jQuery对象 选择器 selector：获取需要操作的DOM 元素
//jQuery对象 //DOM对象
通过get(index)方法得到相应的DOM对象
var $txtName =$("#txtName"); var txtName =$txtName.get(0); //jQuery对象 //DOM对象
$(document).ready(function(){ var h1 = document.getElementById("title"); var $h1 = $(h1); $h1.click(function(){ alert('非常满意'); }); }); .. .. <h1 id='title'>请为我们的服务做出评价</h1>
基本选择器
<div id="box"> id为box的div <h2 class="title">class为title的h2</h2> <h3 class="title">class为title的h3</h3> <h3>热门排行</h3> <dl> <dt><img src="images/case_1.gif/></dt> <dd class="title">斗地主</dd> <dd>休闲游戏</dd> <dd>QQ斗地主是国内同时在线人......</dd> </dl> $(function() { </div> $("h2").click(function(){ $("h3").css("background-color","#09F"); //$(".title").css("background","#09F"); //$("#box").css("background","#09F"); //$("h2,dt,.title").css("background","#09F"); //并集选择器 //$("h3.title").css("background","#09F"); //交集选择器 //$("*").css("color","red"); //全局选择器 }); 所有class为title的<h3>元素 });
编写个数
DOM模型
浏览器把HTML文档的元素转换成节点对象，所有节点组
成了一个树状结构


以对象描述文档的方式就是DOM
节点对象就被称为DOM对象
节点类型
元素节点：文档中的所有元素

<h2>……</h2> <p>你最喜欢的食品是？ </p>
文本节点：元素节点内的文本内容

属性节点：元素节点的子节点
层次选择器
样式与jQuery代码
<style type="text/css"> * {margin:0; padding:0; line-height:30px;} #menu {border:2px solid #03C; padding:10px;} a {text-decoration:none; margin-right:5px;} span {font-weight:bold; padding:3px;} h2 {margin:10px 0;} </style> $(function() { $("h2").click(function(){ $("#menu span").css("background-color","#09F"); //$("#menu>span").css("background-color","#09F"); //$("h2+dl").css("background-color","#09F"); //$("h2~dl").css("background-color","#09F"); }); });
层次选择器
<div id="menu"> <h2>全部旅游产品分类</h2> <dl> <dt>北京周边旅游<span>特价</span></dt> <dd><a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a> </dd> </dl> <dl> <dt>景点门票</dt> <dd><a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a> </dd> <dd><a href="#">山水</a> <a href="#">双休</a> </dd> </dl> <span>更多分类</span> </div>
常用语法举例
css("属性","属性值")

为元素设置CSS样式的值 为元素添加类样式
addClass()

next()

获得元素其后紧邻的同辈元素
$(document).ready(function() { $("h2").click(function(){ $("h2").css("backgroundcolor","#CCFFFF").next().css("display","block"); }); }); <h2>什么是受益人?</h2> </script> <p> <strong>解答：</strong> 受益人是指人身保险中由被保险人或者… .. </p>
jQuery能做什么
访问和操作DOM元素 控制页面样式
对页面事件进行处理
扩展新的jQuery插件 与Ajax技术完美结合
jQuery的优势
体积小，压缩后只有100KB左右 强大的选择器
出色的DOM封装
可靠的事件处理机制 出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
prev+next
prev~sibings
$("#menu span" )选取 #menu下的<span>元 素 $(" #menu>span" )选 取#menu的子元素 <span> 选取紧邻prev元素之后 $(" h2+dl " )选取紧邻 的next元素 <h2>元素之后的同辈元 素<dl> 选取prev元素之后的所 $(" h2~dl " )选取<h2> 有siblings元素 元素之后所有的同辈元 素<dl>
层次选择器
层次选择器通过DOM
名称 语法构成
元素之间的层次关系来获取元素
描述 示例
后代选择器
ancestor descendant
parent>child
子选择器
选取ancestor元素里的 所有descendant（后 代）元素 选取parent元素下的 child（子）元素
相邻元素选 择器 同辈元素选 择器
<style type="text/css"> li{list-style: none; line-height: 22px; cursor: pointer;} .current{background: #6cf; font-weight: bold; color: #fff;} </style> <script src="js/jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("li").click(function(){ 为元素添加类样式 $("#current").addClass("current"); }); }); </script> </head> <body> <ul> <li id="current">jQuery简介</li> <li>jQuery语法</li> </ul> </body>

<p title="提示">……</p>
DOM对象和jQuery对象
DOM对象：直接使用JavaScript获取的节点对象
var objDOM=document.getElementById("title"); var objHTML=objDOM.innerHTML;

jQuery对象：使用jQuery包装DOM对象后产生的对象， 它能够使用jQuery中的方法
jQuery选择器分类
jQuery选择器功能强大，分类如下

类CSS选择器
基本选择器
层次选择器 属性选择器

过滤选择器
基本过滤选择器 可见性过滤选择器
基本选择器
基本选择器

标签选择器、类选择器、ID选择器、并集选择器、交集选择器和 全局选择器
语法构成 element .class 描述 示例
$(document).ready()与window.onload的区别
window.onload $(document).ready()
执行时机
网页中所有DOM文档结构绘制完 必须等待网页中所有的内容加载 毕后即刻执行，可能与DOM元素 关联的内容（图片、flash、视频 完毕后（包括图片、flash、视 等）并没有加载完 频等）才能执行 同一页面不能同时编写多个 同一页面能同时编写多个
jQuery库文件
jQuery库分开发版和发布版
名称
jquery-1.版本号.js （开发版） jquery-1.版本号 .min.js（发布版）
大小
约268KB
说
明
完整无压缩版本，主要用于 测试、学习和开发
约91KB
经过工具压缩或经过服务器 开启Gzip压缩，主要应用于 发布的产品和项目
在页面中引入jQuery

方法action()：jQuery中提供的方法，其中包括绑定事件处理的方 法
“$”等同于“
jQuery ”
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery(function(){...})
jQu来自百度文库ry语法结构-示例