一、jQuery与DOM：
1：DOM对象和jQuery对象的区别：jQuery对象是由普通 的DOM对象以及jQuery的功能集合构成的，因此要使用jQuery的功能特性，就需要先将普通 的DOM对象通过构造器$()转换成jQuery对象，将普通 的DOM对象作为参数传递给它。
2：将DOM对象包装成jQuery对象，跨域直接将一个DOM对象作为参数传递给$()如 $(window)，这样函数$()会将window对象包装成一个jQuery对象然后返回； 也可以传递一个选择器的参数给$()如 $('#parent')。
$实际上是一个函数，
结果为true。这里使用全等运算符比较这两个变量jQuery和$，结果相等，这说明jQuery和$指向的是同一个对象。实际上在引入了jQuery框架之后，它为我们提供了一个jQuery变量，以此作为一个接口让我们可以使用jQuery。但是由于在实际编程中jQuery这个变量使用的频率非常高，而五个单词输入起来相对麻烦一些，所以使用一个“$”变量，让其指向jQuery。
二、jquery选择器用法：
1、元素选择器
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
2、 属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
3、id选择器
例如：$("#lastname") id="lastname" 的元素
4、类选择器：
$(".intro") 所有 class="intro" 的元素
$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
5、伪类选择器
6、
三、jQuery 效果类方法：
1、 隐藏显示：
hide() 和 show() 方法来隐藏和显示 HTML 元素；toggle() 方法来切换 hide() 和 show() 方法，如果当前是hide，toggle会调用show方法，反之则反。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
2、淡入淡出：
fadeIn() 用于淡入已隐藏的元素，fadeOut() 方法用于淡出可见元素。fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。例：
3、滑动
slideDown() 方法用于向下滑动元素，slideUp() 方法用于向上滑动元素。slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
4、改变css样式：css()函数。例：
$("." + v).next().css("background-color", "blue");利用“属性名/值”对所有匹配元素设置多个样式属性（值） css({"propertyname":"value","propertyname":"value",...});
eg：为所有的p元素设置background-color 和 font-size属性并赋值
$("p").css({"background-color":"yellow","font-size":"200%"});
5、 toggleclass()方法在jQuery中的描述为：为集合中的每个元素添加或移除一个或多个class，至于具体是添加还是移除则取决于当前这个元素中是否存在这个class值，或者由参数state的值决定增删。
四、jQuery操作元素常用方法：
五、jQuery遍历
通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历
1、祖先遍历：
使用parents()查找一个元素所有的父节点，那最终父节点的最顶层会查找到html节点为止，包括这个节点。
2、后代遍历：
$("#div").find("*")表示要找到这个节点下所有在后代节点，包括子节点、孙子节点等
3、同胞遍历：
说明：前面在js博客里提到过js的顺序，而在网页中为了使格式规整，一般都把css和js放前面，这时候为了不出错，最好在js前面加上一个ready函数表示文档已全部加载完成，而这个ready函数一般简写成这样：$(function(){
//这里写主体代码，
})
六、js的隐式迭代：
如对一类元素进行一些统一的操作：
$(window).load(function(){
var rows=document.querySelectorAll('tr.row');
var jqueryObj=$(rows);
jqueryObj.addClass('light');
})也可用全部使用jquery代码：
$('tr.row').addClass('light');相对纯生的javascript少了循环，jQuery会自动的遍历这个数组，并为其中的每个元素执行这个添加class的操作。
七、jQuery中操作DOM节点的属性：jQuery为我们提供了attr()方法用于操作DOM的属性。
attr(属性名)
//获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined ）
attr(属性名, 属性值)
//设置属性的值 （为所有匹配的元素设置一个属性值。）
八、事件：
讲完了事件对象我们来讲一下事件冒泡，首先我们要知道冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。阻止事件进行冒泡：
1、通过返回false来取消默认的行为并阻止事件冒泡。
$("form").bind(
"submit",
function() {
return false;
}
);
2、通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind(
"submit",
function(event){
event.preventDefault();
}
);
3、通过使用 stopPropagation() 方法只阻止一个事件冒泡。
$("form").bind(
"submit",
function(event){
event.stopPropagation();
}
);
例1：
例2：现有一个文档阅读器：
框架pdfdemo.html：
<span style="color:#000099"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset cols="20%,10%,70%,*">
<frame src="nav.html" name="nav"/>
<frame />
<frame src="main.html" name="main"/>
</frameset>
</html></span>
导航nav.html：
<span style="color:#000099"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0px;
}
ul li {
list-style-type: none;
//width: 100%;
}
a {
text-decoration: none;
font-size: 20px;
/*border: 1px solid wheat;
border-radius: 10%;*/
}
a:link {
color: blue;
}
a:visited {
color: black;
}
a:hover {
background-color: orange;
}
a:active {
background-color: orangered;
}
div {
margin-left: 0px;
margin-right: 0px;
border: 1px solid wheat;
border-radius: 10%;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
function togg(v) {
/*var ul=document.getElementsByClassName(v);
if(ul[0].style.display=="none"){
ul[0].style.display="block";
}else{
ul[0].style.display="none";
}*/
$("." + v).toggle()
}
</script>
</head>
<body>
<ul>
<li>
<div><img src="img/tb.png" onclick='togg("tran1")' />
<a href="main.html#m1" target="main">jquery</a>
</div>
<ul class="tran1">
<li>
<div>
<a href="main.html#m2" target="main">jquery选择器</a>
</div>
</li>
<li>
<div>
<a href="main.html#m3" target="main">jquery效果</a>
</div>
</li>
<li>
<div>
<a href="main.html#m4" target="main">jquery文档操作</a>
</div>
</li>
<li>
<div>
<img src="img/tb.png" onclick='togg("tran2")' />
<a href="main.html#m5" target="main">jquery遍历</a>
</div>
<ul class="tran2">
<li>
<div>
<a href="main.html#m6" target="main">祖先遍历</a>
</div>
</li>
<li>
<div>
<a href="main.html#m7" target="main">后代遍历</a>
</div>
</li>
<li>
<div>
<a href="main.html#m8" target="main">同胞遍历</a>
</li>
</div>
</ul>
</li>
<li>
<div><img src="img/tb.png" onclick='togg("tran3")' />
<a href="main.html#m9" target="main">jquery ajax</a>
</div>
<ul class="tran3">
<li>
<div>
<a href="main.html#m10" target="main">load方法</a>
</li>
</div>
<li>
<div>
<a href="main.html#m11" target="main">get()和post()方法</a>
</li>
</div>
<li>
<div>
<a href="main.html#m12" target="main">jquery.ajax(...)</a>
</li>
</div>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html></span>主体main.html：
<span style="color:#000099"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul li {
list-style-type: none;
}
table {
width: 600px;
text-align: center;
border: 1px solid wheat;
margin-top: 20px;
font-size: 20px;
}
tr:nth-child(odd) {
background-color: wheat;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
var flag = 0;
function fun() {
$("ol").slideToggle(1000)
}
function choose(v) {
if(flag == 0) {
$("." + v).next().css("background-color", "blue");
flag = 1;
} else if(flag == 1) {
$("." + v).next().css("background-color", "");
flag = 0;
}
}
function choose1(v) {
if(flag == 0) {
$("." + v).css("border", "2px solid red");
flag = 1;
} else {
$("." + v).css("border", "");
flag = 0;
}
}
function over() {
$(this).css("cursor", "hand")
}
</script>
</head>
<body>
<div class="container">
<a name="m1">
<div>
<h2>.jquery</h2></div>
</a>
<a name="m2">
<div>
<h3><p class="btnp" onclick="fun()" onmouseover="over()">.jquery选择器</p></h3>
<ol>
<li>
<p class="p1" onclick='choose("p1")'>元素选择器</p>
<ul>
<li>$("p") 选取
<p> 元素。</li>
<li>$("p.intro") 选取所有 class="intro" 的
<p> 元素。</li>
<li>$("p#demo") 选取所有 id="demo" 的
<p> 元素。</li>
</ul>
</li>
<li>
<p class="p2" onclick='choose("p2")' onmouseover="over()">属性选择器</p>
<ul>
<li>$("[href]") 选取所有带有 href 属性的元素。
</li>
<li>$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。</li>
<li>$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。</li>
<li>$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。</li>
</ul>
</li>
<li>
<p class="p3" onclick='choose("p3")' onmouseover="over()">id选择器</p>
<ul>
<li>例如：$("#lastname") id="lastname" 的元素</li>
</ul>
</li>
<li>
<p class="p4" onclick='choose("p4")' onmouseover="over()">类选择器</p>
<ul>
<li>$(".intro") 所有 class="intro" 的元素</li>
<li>$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素</li>
</ul>
</li>
<li>
<p onclick='choose1("p5")' class="p5" onmouseover="over()">伪类素选择器</p>
<table>
<tr>
<td>:first</td>
<td>$("p:first")</td>
<td>第一个 p元素</td>
</tr>
<tr>
<td>:last</td>
<td>$("p:last")</td>
<td>最后一个 p 元素</td>
</tr>
<tr>
<td>:even</td>
<td>$("tr:even")</td>
<td>所有偶数 tr 元素</td>
</tr>
<tr>
<td>:odd</td>
<td>$("tr:odd")</td>
<td>所有奇数 元素tr</td>
</tr>
</table>
<table>
<tr>
<td>:first</td>
<td>$("p:first")</td>
<td>第一个 p元素</td>
</tr>
<tr>
<td>:last</td>
<td>$("p:last")</td>
<td>最后一个 p 元素</td>
</tr>
<tr>
<td>:even</td>
<td>$("tr:even")</td>
<td>所有偶数 tr 元素</td>
</tr>
<tr>
<td>:odd</td>
<td>$("tr:odd")</td>
<td>所有奇数 元素tr</td>
</tr>
</table>
<table>
<tr>
<td>:first</td>
<td>$("p:first")</td>
<td>第一个 p元素</td>
</tr>
<tr>
<td>:last</td>
<td>$("p:last")</td>
<td>最后一个 p 元素</td>
</tr>
</table>
<table class="tab1">
<tr>
<td>:first</td>
<td>$("p:first")</td>
<td>第一个 p元素</td>
</tr>
<tr>
<td>:last</td>
<td>$("p:last")</td>
<td>最后一个 p 元素</td>
</tr>
<tr>
<td>:first</td>
<td>$("p:first")</td>
<td>第一个 p元素</td>
</tr>
<tr>
<td>:last</td>
<td>$("p:last")</td>
<td>最后一个 p 元素</td>
</tr>
<tr>
<td>:first</td>
<td>$("p:first")</td>
<td>第一个 p元素</td>
</tr>
<tr>
<td>:last</td>
<td>$("p:last")</td>
<td>最后一个 p 元素</td>
</tr>
<tr>
<td>:first</td>
<td>$("p:first")</td>
<td>第一个 p元素</td>
</tr>
<tr>
<td>:last</td>
<td>$("p:last")</td>
<td>最后一个 p 元素</td>
</tr>
<tr>
<td>:first</td>
<td>$("p:first")</td>
<td>第一个 p元素</td>
</tr>
<tr>
<td>:last</td>
<td>$("p:last")</td>
<td>最后一个 p 元素</td>
</tr>
<tr>
<td>:first</td>
<td>$("p:first")</td>
<td>第一个 p元素</td>
</tr>
<tr>
<td>:last</td>
<td>$("p:last")</td>
<td>最后一个 p 元素</td>
</tr>
</table>
</li>
</ol>
</div>
</a>
<a name="m3">
<div>
<h2>.jquery效果</h2>
</div>
</a>
<a name="m4">
<div></div>
</a>
<a name="m5">
<div></div>
</a>
<a name="m6">
<div></div>
</a>
<a name="m7">
<div></div>
</a>
<a name="m8">
<div></div>
</a>
<a name="m9">
<div></div>
</a>
<a name="m10">
<div></div>
</a>
<a name="m11">
<div></div>
</a>
<a name="m12">
<div></div>
</a>
</div>
<script>
</script>
</body>
</html></span>效果：
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
