jQuery的总结
1.初始jQuery
2.jQuery的选择器
3.jQuery的事件和动画
4.使用jQuery操作Dom
小案例等
初始jQuery
jQuery是JavaScript的程序库之一，它是JavaScript对象和实用函数的封装(不存在浏览器兼容性问题)
jQuery的优势
1.轻量级
2.强大的选择器
3.出色的DOM封装
4.可靠的事件处理机制
5.出色的浏览器的兼容性问题
6.隐式迭代
7.丰富的插件支持
jQuery语法
$(document).ready(function(){代码}) 窗体加载执行
window.onload和$(document).ready()区别
1.执行时机不同：前者必须等待网页中所有的内容加载完毕后才能执行,后者网页中DOM文档绘制完毕后执行，ready在前，window在后
2.编写个数不同：前者只能编写一个，后置可以编写多个
3.后者可以简化代码$(function(){代码});
jQuery语法结构
语法：$(selector).action();
工厂函数： $()作用：将DOM对象转换为jQuery对象
selector选择器
$("#id")id选择器 .为类选择器 标签为标签选择器
注意：返回一个数组，length属性可以进行判断是否存在 或者 size()方法
但是在读取时，只读取第一个对象
注意：jQuery事件和JavaScript有区别
action()方法
addclass():作用向被选元素添加一个或多个类样式
语法 jQuery 对象.addclass([样式名]) 可以多个，使用空格隔开即可
语法：css("属性","值")设置一个
语法：css({"属性":"值"，"属性":"值"}) 设置多个
css()和addclass()区别
css()方法为所匹配的元素设置给定的CSS样式
addclass()方法想所匹配的元素添加一个或多个类，该方法不会删除已经存在的类，仅是在基础在追加一个新的类样式
$(selector).show()：方法显示 $(selector).hide()：方法隐藏 children()：遍历后代
removeclass()：删除类样式
hasclass()：判断是否存在
attr()：添加属性
prop()：添加属性
$是jQuery程序的标志
链式操作
next()方法作用是获取所匹配元素集合中每个元素其后紧邻的同辈元素
语法：$(selector).css().css();
隐式迭代:不需要遍历所有元素，可以直接设置元素的样式
DOM对象
DOM对象只能调用DOM元素本身的属性和方法，不能调用jQuery里面的属性和方法
注意：通过getelementById()等方法获取的值就是DOM对象
jQuery对象
通过jQuery的选择器获取出来的对象就是jQuery对象
语法：$(selector).html()等同于innerHTML
DOM和jQuery对象转换
jQuery对象转换为DOM对象二种方法
语法: var 变量名称=$(selector).get(0) 或者 var 变量名=$(selector)[0];
注意：因为jQuery选择器返回的是一个数组
DOM对象转换为jQuery对象
var item=document.getelementbyid("值")；
语法 var 变量=$(item);
注意：jQuery对象只能调用jQuery对象的属性和方法，JavaScript也是一样
jQuery选择器
单词
1.first：第一个
2.last：最后一个
3.even：偶数
4.odd：奇数
选择器的作用是获取元素
jQuery选择器的优势
1.简洁的写法
2.完善的处理机制
jQuery选择器类型
基本选择器
层次选择器
属性选择器
基本过滤选择器
可见性过滤选择器
基本选择器
标签选择器 返回元素集合 使用标签名称
类选择器 返回元素集合 使用.
id选择器 返回一个元素 使用#号
并集选择器 返回元素集合 多个值使用逗号隔开
全局选择器 返回元素集合 使用 *号
层次选择器
语法：$("Div>p")
后代选择器 Div P中间使用空格隔开
子选择器 Div>p使用>号
相邻元素选择器 Div+P 使用+号表示相邻 只抓取下一个满足条件的兄弟节点
同辈元素选择器 Div~P 使用~表示同辈 选取后面所有满足条件的同辈元素
注意：jQuery中next()方法可以代替相邻元素选择器，使用nextall方法可以代替同辈元素选择器
属性选择器
语法：$("input[value]")
[attribute] 获取包含该元素的控件集合
[attribute=value] 获取包含该元素并且元素值相匹配
[attribute!=value] 选取包含该元素但值和值不匹配
[attribute^=value] 属性以什么开头
[attribute$=value] 属性以什么结尾
[attribute*=value] 获取包含该字母的值 理解：相当于模糊查询
基本过滤选择器
语法 $("li:基本过滤选择器");
：first 选取第一个元素
：last 选取最后一个元素
：not(selector) 取反操作
：even 偶数 注意从0开始
：odd 奇数 从0开始
：eq(index) 选取索引值等于index的元素
：gt(index) 选取索引值大于index的元素
：lt(index) 获取索引值小于index的元素
：header 获取全部的h标签
：focus 选取当前获取的焦点对象
实现商品的隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
.contain{width:100%;margin:0px auto;}
tr{text-align:center;}
th{line-height:45px;background:#0000ff; color: #ffffff;}
td{border-bottom:1px #d7d7d7 solid;}
td,td a{padding:8px 0;color:#666;font-size:14px;}
td img{vertical-align:middle;}
td img,td a{display:inline-block;margin-right:8px;}
</style>
</head>
<body>
<div class="contain">
<table border="0" width="100%" cellspacing="0">
<tr class="t-head">
<th width="50%">商品</th>
<th width="10%">单价</th>
<th width="10%">数量</th>
<th>操作</th>
</tr>
<tr>
<td>
<img src="img/f1.jpg" width="50" height="50"/>
<a href="">丹幕妮通勤波点印花毛衣</a>
</td>
<td>180.0</td>
<td>3</td>
<td><a href="javascript:void(0);" name="del">删除</a></td>
</tr>
<tr>
<td>
<img src="img/f2.jpg" width="50" height="50"/>
<a href="">预售太平洋女装连衣裙</a>
</td>
<td>765.0</td>
<td>4</td>
<td><a href="javascript:void(0);" name="del">删除</a></td>
</tr>
<tr>
<td>
<img src="img/f3.jpg" width="50" height="50"/>
<a href="">丹幕妮通勤红色小外套</a>
</td>
<td>456.0</td>
<td>2</td>
<td><a href="javascript:void(0);" name="del">删除</a></td>
</tr>
<tr>
<td>
<img src="img/f4.jpg" width="50" height="50"/>
<a href="">漫巴森秋装新款套头衫</a>
</td>
<td>140.0</td>
<td>1</td>
<td><a href="javascript:void(0);" name="del">删除</a></td>
</tr>
</table>
</div>
<script src="js/JQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("tr:not('tr:first'):even").css("background-color","red");
$("tr:not('tr:first'):odd").css("background-color","#0f0");
$("a[name]").click(function(){
//var $remove=this.pa
// var Item=$("tr");
// var Set=$(this).parent();
// alert(Set.html());
var index=$("table tr td a").index(this);
$("table tr:eq("+index+")").remove();
});
})
</script>
</body>
</html> 可见性过滤器
：visible 选取所有可见的元素
：hidden 选取所有隐藏的元素 可以获取hide()方法隐藏的值和display：none等控件
注意：在编写选择器时要注意特殊符号和空格
通过选择器实现样式的修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;}
body{
font-family: "微软雅黑";
font-size: 12px;
line-height: 28px;
}
#book{
margin: 5px auto 0 auto;
width: 650px;
overflow: hidden;
}
.imgLeft{
float:left;
width: 210px;
}
.imgLeft img{width: 200px;}
.textRight{
float: right;
width: 440px;
}
#book h1{font-size: 16px; line-height: 50px;}
.textRight dl{padding-left: 5em;}
.textRight dl dd{display: none;}
#jdPrice p{ display:inline;}
.JingPrice{
color: red;
font-weight: 800px;
font-size: 24px;
}
.Money{
color: #fff;
background-color: red;
padding: 1px 5px;
margin-right: 5px;
}
.Span{
color: #f00;
text-decoration: line-through;
}
</style>
</head>
<body>
<section id="book">
<div class="imgLeft"><img src="img/store.jpg" alt="岛上书店"></div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
<div class="price">
<div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
<dl>
<dt>以下促销可在购物车任选其一</dt>
<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
<dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
</dl>
<p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p>
</div>
</div>
</section>
<script src="js/JQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#jdPrice>span:eq(0)").addClass("JingPrice");
$("#jdPrice>p>span").addClass("Span")
$("dl").css("color","red");
$("dl").click(function(){
$("dd").show();
});
$("dd span,#ticked>span").addClass("Money");
});
</script>
</body>
</html>jQuery事件和动画
基础事件
语法：事件名=“函数名（）” 或者 DOM对象.事件=函数
鼠标事件
Mouseover():鼠标指针移过时
Mouseout():鼠标指针移出时
Mouseenter():鼠标指针进入时
Mouseleave()：鼠标指针离开时
键盘事件
Keydown():按下键盘时
Keyup():释放按键时
Keypress()：产生可打印的字符时
浏览器事件
$(selector).resize();
绑定事件
语法：Bind(type，[data],fn) 还有on(),live(),one()
Type:事件类型 data：可选参数，传递数据 fn：处理函数，用来绑定
绑定多个事件：$(selector).bind(事件1，事件2) 使用逗号隔开
移出事件
语法：unbind([type],[fn])
不带参数表示移除绑定的全部事件
复合事件
Hover()：鼠标指针移入和移出事件
语法：hover(enter，leave)
toggle方法：连续click事件，重复调用这几个函数
语法：toggle(fn1，fn2)
循环调用类样式
语法：toggleclass(样式名称)
控制元素显示与隐藏
显示
$(selector).show([speed],[callback])
Speed:规定从隐藏到显示时间已毫秒为单位
callback：执行完之后，要调用的函数
隐藏
$(selector).hide([speed],[callback])
Speed:从显示到隐藏的时间
callback：执行完之后，要调用的函数
实现淡入和淡出的效果
<body>
<img src="img/1.gif" >
<input type="button" name="no1" id="" value="淡出" />
<input type="button" name="no2" id="" value="淡入" />
<script src="js/JQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("input[name=no1]").click(function(){
$("img").fadeIn("slow");
});
$("input[name=no2]").click(function(){
$("img").fadeout(1000);
});
});
</script>
</body> 改变元素透明度
淡入
$(selector).fadein([speed],[callback])
Speed:从隐藏到完全可见的速度
callback：必须设置第一个参数，执行完调用的函数
淡出
$(selector).fadeOut([speed],[callback])
参数和淡出一样
改变元素高度（下拉效果）
语法：$(selector).slideup([speed],[callback])
$(selector).sideDown([speed],[callback])
参数和淡出一样
自定义动画
语法：$(selector).animate({params}，speed，callback)；
Params:必须，定义形成动画的css属性
Speed:可选，规定效果时间
Callback:可选，滑动完成之后调用的函数名称
实现小小的变化效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid red;
: 100px;
}
</style>
</head>
<input type="button" value="开始" onclick="Go()"/>
<div id="">
</div>
<body>
<script src="js/JQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function Go(){
$("div").animate({"border-radius":"100px"},2000,function(){
Qu();
})
}
function Qu(){
$("div").animate({"border-radius":"0px"},2000,function(){
Go();
})
}
</script>
</body>
</html>使用jQuery操作DOM
设置和获取样式值
$(selector).css(name，value) 或者 css({"name":"value","name":"value"})
获取值
$(selector).css(name)
追加样式和移除样式
追加样式
语法：$(selector).addclass(class)
如果多个样式使用空格隔开 只是追加不影响其他样式
移除样式
语法：$(selector).removeClass(class)
切换样式
语法：$(selector).toggleClass(class)
进行类样式的来回切换
判断样式
语法：$(selector).hasClass(class)
规定指定类名，返回一个布尔值，如果包含返回true，否则返回false
内容操作
语法：html([content])
Content:重新设置文本内容，不写参数时表示获取元素值
标签内容操作
语法：text([content])
注意：特殊字符会被注释，参数和html一样
属性值操作
语法：val([value]);
带参数表示修改value值，不带表示获取值
节点与属性操作
查找节点，使用选择器查询即可
创建节点元素
语法：$(selector) 或者$(element) 或者 $(html)
selector：选择器，使用jQuery选择器进行匹配元素
element：DOM元素，以DOM元素创建jQuery对象
Html:HTML代码，使用HTML字符串创建jQuery对象
使用标签括住即可
插入节点
内部插入和外部插入
$(selector).append(B)：将B添加到A中
……
删除节点
语法：$(selector).remove([expr])
语法：$(selector).empty();
注意：empty()清空节点，他能清空元素中的所有后代节点
替换节点
语法：$(selector).replaceWith(元素)
$(selector).replaceAII(元素):颠倒操作
复制节点
语法：$(selector).clone(参数)
参数布尔值
属性操作
语法：$(selector).attr([name])获取属性
$(selector).attr([name],value) 设置属性 设置多个{属性：值，属性：值}
删除属性
语法：$(selector).removeAttr(name)
Detach():删除整个节点，但是保留事件
Empty()；清空节点
节点遍历
遍历子节点：$(selector).children(参数)
参数：过滤子元素的表达式
遍历同辈元素：next()，prev(),siblings()
遍历前辈元素：parent()，parents()
其他遍历方法：$(selector).each(function(index，element))
index表示选择器的index位置，element表示当前元素
End():结束当前链条中最近的筛选操作，并将匹配元素集还原为之前状态
Css-DOM操作
滚动条：scrollleft：获取左右滚动条位置
scrollTop：获取上下滚动条位置
结尾:新的一年开启新的征程，在新的一年里，愿你我都会在2022年收获硕果，加油，冲冲冲
