JavaScript的第十二天
目录
一、jQuery的顶级对象
区分jQuery对象和dom对象
两种对象的相互转换方式（一般不进行jQuery向DOM元素的转换）
二、入口函数
$(document).ready(function(){})（ 简写为$(function () { }) ）：
三、jquery中的选择器
1、基本选择器
2、层级选择器
3、过滤选择器
四、筛选方法
五、jquery的排他思想
通过在在同一父级下自己的修改，并对所有的兄弟元素进行修改即可完成排他思想
引申一个链式编程
六、jquery的操作样式之css方式
1、.css()方法写一个值的时候是获取属性值 ，写两个的时候是设置样式
2、写多个css属性：
七、jquery的操作样式之类（class）的操作
1、jquery中的类操作
2、具体使用方法
tab栏切换案例
八、jquery的效果
stop（）的几种用法
使用jquery效果可以完成jquer简单动画
一、jQuery的顶级对象
在jQuery中，存在类似document的顶级对象：$
美元符号（$）不仅是顶级对象，也是jQuery的别称
区分jQuery对象和dom对象
1、jQuery对象：用jQuery方式获取的对象，本质上是对DOM元素的包装，该方式获取的元素具有隐式迭代，可以自动遍历内部内容。、
2、DOM对象：用原生js获取的对象为DOM对象
两种对象的相互转换方式（一般不进行jQuery向DOM元素的转换）
使用 .get（）或直接添加 [ ] 可以转换为DOM元素
//jQuery对象转换为DOM对象 $(" ").get() $(" ")[]直接使用 $（ " "）将DOM元素转换为jquery元素
二、入口函数
$(document).ready(function(){})（ 简写为$(function () { }) ）：
通常用于在dom加载完毕后再执行的函数，为了避免因为dom元素尚未加载完成而导致的错误。这段函数会在页面的dom元素加载完成后自动开始进行函数内的事件处理程序。
三、jquery中的选择器
1、基本选择器
| id选择器 | 通过元素的ID来选择元素 |
| 元素选择器 | 通过元素标签名来选择元素 |
| 类名选择器 | 通过元素的class来选择元素 |
| 通配符选择器 | 通过通配符*来选择所有元素 |
| 并级选择器(多项选择器) | 通过逗号,分隔多个选择器 |
//id选择器
$("#box")
//通配符选择器
$("*")
//类名选择器
$(".nav")
//元素选择器
$("li")
//并集选择器
$('ol,ul')2、层级选择器
| 后代选择器 | 使用空格分隔两个选择器，选择第一个选择器的后代元素中所有符合第二个选择器的元素 |
| 子代选择器 | 使用>分隔两个选择器,选择第一个选择器的复合第二个选择器的直接子代元素 |
// 选择ID为'parent'的元素内的所有<p>元素
$('#parent p')
// 选择ID为'parent'的元素的直接子<p>元素
$('#parent > p') 3、过滤选择器
| ：first | 选取第一个元素 |
| ：last | 选取最后一个元素 |
| ：eq（index） | 精准获取元素，index值为元素的索引值（从0开始） |
| ：odd | 所有的索引值为奇数的元素 |
| ：even | 所有的索引值为偶数的元素（包括索引 0 ） |
// :first 选取第一个元素
$("ul li:first").css("fontSize", "30px")
// :last 选取最后一个元素
$("ul li:last").css("fontSize", "30px")
// :eq(index) 精准获取元素 index值为元素的索引 从0 开始
$("ul li:eq(3)").css("background", "#0f0")
// :odd 奇数选择 所有的索引值为奇数的元素
$("ul li:odd").css("background", "#0f0")
// :even 偶数选择 所有的索引值为偶数的元素
$("ul li:even").css("background", "#f00")
四、筛选方法
| parent() | 返回的是最近一级的父级元素 |
| children() | 选择符合的直接子代 |
| siblings() | 除了自身元素之外的所有兄弟元素 |
| nextAll() | 后面的兄弟元素 |
| prevAll() | 前面的兄弟元素 |
| find('') | 可以选所有符合的后代 |
| .eq() | 类似于索引值查询 |
| hasClass( " " ) | 判断是否有某个类名 |
五、jquery的排他思想
通过在在同一父级下自己的修改，并对所有的兄弟元素进行修改即可完成排他思想
$(function () {
$("button").click(function () {
$(this).css("background", "#0f0")
$(this).siblings().css("background", "")
})
})引申一个链式编程
可以在设置自身后继续设置兄弟元素的属性
$(function () {
$("button").click(function () {
$(this).css("background", "#0f0").siblings().css("background", "")
})
})六、jquery的操作样式之css方式
1、.css()方法写一个值的时候是获取属性值 ，写两个的时候是设置样式
第一个参数为属性名，第二个参数为属性值，需全部使用引号包裹，并用逗号隔开
$("div").css("width");
$("div").css("width", "500px")2、写多个css属性：
$("div").css({
width: "500px",
height: "500px",
backgroundColor: "#fff"
})七、jquery的操作样式之类（class）的操作
1、jquery中的类操作
jquery中类的操作无法影响原先的类，而js中的方法会覆盖原先的类
| addClass() | 给选中的元素添加一个或多个类名 |
| removeClass() | 从选中的元素中移除一个或多个类名 |
| toggleClass() | 在选中的元素上切换一个或多个类名 |
2、具体使用方法
$("button").eq(0).click(function () {
$("div").addClass("current")
})
$("button").eq(1).click(function () {
$("div").removeClass("current")
})
$("button").eq(2).click(function () {
$("div").toggleClass("current")
})tab栏切换案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } .tab { width: 978px; margin: 100px auto; } .tab_list { height: 39px; border: 1px solid #ccc; background-color: #f1f1f1; } .tab_list li { float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; } .tab_list .current { background-color: #c81623; color: #fff; } .item_info { padding: 20px 0 0 20px; } .item { display: none; } </style> <script src="../../jquery.min.js"></script> </head> <body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价（50000）</li> <li>手机社区</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"> 商品介绍模块内容 </div> <div class="item"> 规格与包装模块内容 </div> <div class="item"> 售后保障模块内容 </div> <div class="item"> 商品评价（50000）模块内容 </div> <div class="item"> 手机社区模块内容 </div> </div> </div> <script> $("ul li").click(function () { $(this).addClass("current").siblings().removeClass("current") console.log($(this).index()) $(".tab_con>div").eq($(this).index()).css("display", "block") .siblings().css("display", "none") }) </script> </body> </html>
八、jquery的效果
| .show() | 显示匹配的元素，如果元素已经是可见的，则不会有任何效果。动画完成后会触发shown事件。 |
| .hide() | 隐藏匹配的元素，如果元素已经是隐藏的，则不会有任何效果。动画完成后会触发hidden事件。 |
| .toggle() | 切换匹配元素的可见状态。如果元素是可见的，则隐藏它；如果元素是隐藏的，则显示它。 |
| .slideDown() | 通过滑动的方式显示匹配的元素，从上到下滑动到可见位置。 |
| .slideUp() | 通过滑动的方式隐藏匹配的元素，从可见位置滑出到下方。 |
| .slideToggle() | 通过滑动的方式切换匹配元素的可见状态。 |
| .fadeIn() | 使匹配的元素淡入，从不透明到透明。 |
| .fadeOut() | 使匹配的元素淡出，从透明到不透明。 |
| .fadeToggle() | 通过淡入淡出的方式切换匹配元素的可见状态。 |
| .stop() | 停止当前正在运行的动画，可以清除动画队列并立即完成当前动画。 |
| .finish() | 立即结束所有匹配元素的所有动画，并清除动画队列。 |
stop（）的几种用法
// stop() 停止动画
$(".end").click(function () {
// 停止当前动画 如果有其它动画开始执行
// $("#box").stop()
// 停止所有动画
// $("#box").stop(true)
// 立即执行完当前动画 停止其它所有动画
// $("#box").stop(true, true)
})使用jquery效果可以完成jquer简单动画
animate({修改的样式},时间,动画效果,回调函数) （color background display 无法实现）
通过使用上述函数，并引入动画库即可
$(".start").click(function () { $("#box").animate({ width: '500px' }, 1000, "linear", function () { console.log(1); }).animate({ height: "600px" }, 1000, "easeBothStrong", function () { console.log(2); }).animate({ marginTop: "300px" }, 1000, "elasticIn", function () { console.log(3); }) })