方法action()：jQuery中提供的方法，其中包括绑定事件处理的方 法
“$”等同于“
jQuery ”
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery(function(){...})
jQuery语法结构-示例
基本选择器
<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>
文本节点：元素节点内的文本内容
属性节点：元素节点的子节点
$("#title").html( ); 等同于 document.getElementById("title").innerHTML;
jQuery语法结构语法来自$(selector).action() ;
工厂函数$()：将DOM对象转化为jQuery对象 选择器 selector：获取需要操作的DOM 元素
<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>
jQuery选择器分类
jQuery选择器功能强大，分类如下
类CSS选择器
基本选择器
层次选择器 属性选择器
过滤选择器
基本过滤选择器 可见性过滤选择器
基本选择器
基本选择器
标签选择器、类选择器、ID选择器、并集选择器、交集选择器和 全局选择器
语法构成 element .class 描述 示例
//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>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
jQuery基本语法
使用jQuery弹出提示框
<script> $(document).ready(function() { alert("我欲奔赴沙场征战jQuery，势必攻克之！"); }); </script> 为页面加载事件绑定方法
练习-制作帮助中心问答特效
需求说明
点击标题后，显示回答的内容，同时标题加上背景色
DOM对象转jQuery对象
使用$()函数进行转化：$(DOM对象)
var txtName =document.getElementById("txtName"); //DOM对象 var $txtName =$(txtName); //jQuery对象
层次选择器
层次选择器通过DOM
名称 语法构成
元素之间的层次关系来获取元素
描述 示例
后代选择器
ancestor descendant
parent>child
子选择器
选取ancestor元素里的 所有descendant（后 代）元素 选取parent元素下的 child（子）元素
相邻元素选 择器 同辈元素选 择器
$(document).ready()与window.onload的区别
window.onload $(document).ready()
执行时机
网页中所有DOM文档结构绘制完 必须等待网页中所有的内容加载 毕后即刻执行，可能与DOM元素 关联的内容（图片、flash、视频 完毕后（包括图片、flash、视 等）并没有加载完 频等）才能执行 同一页面不能同时编写多个 同一页面能同时编写多个
prev+next
prev~sibings
$("#menu span" )选取 #menu下的<span>元 素 $(" #menu>span" )选 取#menu的子元素 <span> 选取紧邻prev元素之后 $(" h2+dl " )选取紧邻 的next元素 <h2>元素之后的同辈元 素<dl> 选取prev元素之后的所 $(" h2~dl " )选取<h2> 有siblings元素 元素之后所有的同辈元 素<dl>
名称 标签选择器 类选择器 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");
