jQuery
jQuery的概念
jQuery是一个快熟、简洁的JavaScript库，其设计的宗旨是“write Less ,Do More”,即倡导写更少的代码，做更多的事情。
j就是JavaScript；Query查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能
jQuery封装的JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质：就是学习调用这些函数（方法）。
jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。
优点：1轻量级。核心文件才几十个kb 2跨浏览器兼容 3连式编程 隐式迭代 4对事件、样式、动画都有支持 5支持插件扩展开发 6免费、开源
入口函数
<style>
div{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
<body>
<script>
//$('div').hide();
//1.等待页面DOM加载完毕再去执行js代码
$(document).ready(function(){
$('div').hide();
})
//2.等待页面DOM加载完毕再去执行js代码
$(function(){
$('div').hide();
})
</script>
<div></div>
等待DOM结构渲染完毕后即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
相当于原生js中的DOMContenLoaded
跟原生的js中的load事件是不相同的。
jQuery的基本使用
jQuery的顶级对象$
-
是 j Q u e r y 的 别 称 ， 在 代 码 中 可 以 使 用 j Q u e r y 代 替 是jQuery的别称，在代码中可以使用jQuery代替 是jQuery的别称，在代码中可以使用jQuery代替，但一般为了方便，通常使用$
//1.$是jQuery的别名（另外的名字） // $(function(){ // alert(11); // }); jQuery(function(){ alert(11); })
2. 是 j Q u e r y 的 顶 级 对 象 ， 相 当 于 原 生 J a v a S c r i p t 中 的 w i n d o w 。 把 元 素 利 用 是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用 是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用包装成jQuery对象，就可以调用jQuery的方法。
3.jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）
//1.DOM对象：用原生js获取过来的对象就是DOM对象
var myDiv=document.getElementsByTagName("div");//myDiv DOM对象
console.dir(myDiv);
//2.jQuery对象：用jQuery方法获取的元素就是jQuery对象
$('div');//$('div')是jQuery对象
console.dir($('div'));
//3.jQuery对象只能使用jQuery方法；DOM对象只能使用原生JavaScript属性和方法。
myDiv.style.display="none";
$('div').hide();
jQuery对象和DOM对象
DOM对象与jQuery对象之间是可以互相转换的。
因为原生js比jQuerty更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
- DOM对象转换为jQuery对象：$(DOM对象)
- jQuery对象转换为DOM对象（两种方法）
$(‘div’)[index] index为索引号
$(‘div’).get(index)
//1.DOM对象转换为jQuery对象
//(1) 我们直接获取视频，得到的jQuery
// $('video');
//(2)我们已经使用原生js 获取过来的DOM对象
var myVideo=document.querySelector('video');
$(myVideo);
//2、jQuery对象转换为DOM对象
// myVideo.play();
$('video')[0].play();
$('video').get(0).play();
jQuery中常用的API
jQuery选择器
jQuery基础选择器
原生js获取元素方法很多、很杂，而且兼容性是不一致的，因此jQuery给我们做了封装，使用获取元素统一标准。
$("选择器");//里面选择器直接写CSS选择器即可，但是要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定ID的元素 |
| 全选选择器 | $("*") | 匹配所有元素 |
| 类选择器 | $(".class") | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”) | 选取多个元素 |
| 交集选择器 | $(“li.current”) | 交集元素 |
<div class="box1">我是div1</div>
<p>我是p标签</p>
<ol>
<li>我是ol元素</li>
<li>我是ol元素</li>
</ol>
<ul>
<li>我是ul元素</li>
<li>我是ul元素</li>
</ul>
<script>
$(function(){
console.log($(".box1"));
})
</script>
jQuery层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”); | 使用>号，获取亲儿子的层级元素；注意：并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等。 |
$(function(){
console.log($(".box1"));
console.log($("ul li"));
})
后期铺垫
jQuery设置样式
$('div').css('属性'，'值')
隐式迭代（**）
遍历内部DOM元素（伪数组形式存储）的过程叫做隐式迭代。
<div>看</div>
<div>见</div>
<div>我</div>
<div>没</div>
<ul>
<li>相同的</li>
<li>相同的</li>
<li>相同的</li>
</ul>
<script>
//1.获取四个div
console.log($('div'));
//2.给四个div加颜色 jQuery 不能使用style
$("div").css("backgroundColor","pink");
//3.隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
$("ul li").css("color","blue");
</script>
jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(“li:first”) | 获取第一个li元素 |
| :last | $(“li:last”) | 获取最后一个li元素 |
| :eq(index) | $(“li:eq(2)”) | 获取到的li元素中，选择索引号为2的元素，索引号从0开始 |
| :odd | $(“li:odd”) | 获取到的li元素中，选择索引号是奇数的元素 |
| :even | $(“li:even”) | 获取到的li元素中，选择索引号是偶数的元素 |
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
$(function(){
$("ul li:first").css("color","red");
$("ul li:odd").css("color","pink");
});
</script>
jQuery筛选方法（**）
| 语法 | 用法 | 说明 |
|---|---|---|
| 记住：parent() | $(“li”).parent(); | 查找父级 |
| 记住：children(selector) | $(“ul”).children(“li”); | 相当于$(“ul>li”)，最近一级 |
| 记住：find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”) 后代选择器 |
| 记住：siblings(selector) | $(".first").sibiling(“li”) | 查找兄弟节点，不包括自己 |
| nextAll([expr])（了解） | $(".first").nextAll() | 查找当前元素之后的所有的同辈元素 |
| prevtAll([expr])（了解） | $(".last").parenAll() | 查找当前元素之前所有的同辈元素 |
| hesClass(class) (了解) | $(‘div’).hasClass(‘protected’) | 检查当前的元素是否含有某个特定的类，比如有，则返回true |
| 记住：eq(index) | $(‘li’).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
<script>
//方法都带括号
$(function(){
//1.找父亲 parent() 返回最近一级的父元素
console.log($("son").parent());
//2.找儿子
//(1)只找亲儿子 子集选择器 ul>li children()
$('nav').children('p').css("color","red");
//(2)找所有的孩子，又可以能是儿子也有可能是孙子 find()
$('nav').find('p').css('color','pink');
//3.找兄弟 除了自身外所有的亲兄弟
$("ol .item").siblings("li").css("color","red");
//第n个元素
var index=2;
//利用选择器
// $("ul li:eq(2)").css("color","blue");
$("ul li:eq("+index+")").css("color","blue");
//利用选择方法
// $("ul li").eq(3).css("color","yellow");
$("ul li").eq(index).css("color","yellow");
//判断是否有这个类名
$("div:first").hasClass("cutter");
})
</script>
新浪下拉列表
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li><a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li><a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li><a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li><a href="#">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function(){
//鼠标经过
$(".nav>li").mousemove(function(){
//$(this)jQuery当前元素 this不能加引号
//show()显示元素
$(this).children("ul").show();
})
//鼠标离开
$(".nav>li").mouseout(function(){
$(this).children("ul").hide();
})
})
</script>
jQuery里面的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余兄弟元素清除样式。
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function(){
//1.隐式迭代 给所有按钮设置点击事件
$("button").click(function(){
//2.给当前元素设置背景颜色
$(this).css("background","pink");
//3.给其余兄弟去掉颜色
$(this).siblings("button").css("background","");
})
})
淘宝服饰精品案例
- 核心原理：鼠标经过左侧盒子某个li，就让内容区盒子相对应图片显示，其余的图片隐藏。
- 需要得到当前小li的索引值，就可以显示对应的图片
- jQuery得到当前元素索引号$(this).index()
- 中间对应的图片，可以通过eq(index)方法去选择
- 显示元素show() 隐藏元素hide()
<script>
$(function(){
//1.鼠标经过左侧的小li
$("#left li").mousemove(function(){
//2.得到当前小li的索引号
var index=$(this).index();
console.log(index);//获取索引
//3.让我们右侧盒子对行相应的索引号的图片显示
$("#content div").eq(index).show();
//4.让其他的图片隐藏起来
$("#content div").eq(index).siblings().hide();
})
})
</script>
链式编程
链式编程是为了节省代码量，看起来更优雅
$(this).css('color','red').sibling().css('color','')
注意链式对象对什么进行执行程序
jQuery样式操作
操作css方法
jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。
1.参数只写属性名，则返回属性值
$(this).css("color");
2.参数是属性名，属性值，逗号间隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color","red");
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({"color":"white","font-size":"20px"});
如果是复合属性必须用驼峰命名法 属性值不是数字必须叫引号
设置样式的方法
作用等同于以前的classList,可以操作类样式，注意操作类里面的参数不要加点。
<script>
$(function(){
//1.添加类 addClass()
// $("div").click(function(){
// $(this).addClass("current");
// });
//2.删除类 removeClass()
// $("div").click(function(){
// $(this).removeClass("current");
// });
//3.切换类 toggleClass()
$("div").click(function(){
$(this).toggleClass("current");
});
})
</script>
tab栏切换
$(function(){
//1.当点击上部li，当前li添加current类，其余熊度移出类
$(".tab_list li").click(function(){
//链式编程操作
$(this).addClass("current").siblings().removeClass("current");
//2、点击的同时，得到当前li的索引号
var index=$(this).index();
console.log(index);
//3、让下部里面相应索引号的item显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
});
})
类操作与className区别
原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作，不影响原先的类名。
$(function(){
$('.item').addClass("red");//addClass相当于追加类名 不影响以前的类名
$(".item").removeClass("item");//对指定元素进行删除
})
jQuery效果
显示效果
语法：show([speend,[easung],[fn]])
显示参数
- 参数都可以省略，无动画直接显示。
- speed:三种预订速度之一的字符串（“slow” ,“normal”, or"fast")或表示动画时长的毫秒数值（如：1000）。
- easing：（Optional)用来指定切换效果，默认“swing”，可用参数"linear".
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
隐藏效果
语法：hide([speend,[easung],[fn]])
隐藏效果
语法：hide([speend,[easung],[fn]])
$(function(){
$("button").eq(0).click(function(){
$("div").show(1000,function(){
alert(i);
});
})
$("button").eq(0).click(function(){
$("div").hide(1000,function(){
alert(i);
});
})
$("button").eq(0).click(function(){
$("div").toggle(1000,function(){
alert(i);
});
})
})
王者手风琴
$(function(){
//鼠标经过某个小li 有两步操作
$(".king li").mouseenter(function(){
//1.当前小li 宽度变为224px 同时里面的小图片淡出 大图片淡入
$(this).stop().animate({
width:224
},300).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
//2.其余兄弟小li宽度变为69px,小图片淡入
$(this).siblings("li").stop().animate({
width:69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
});
});
属性操作
获取元素固有的属性：stop()
console.log($("a").prop("href"));
$("a").prop("title","一点都不好");
$("input").change(function(){
console.log($(this).prop("checked"))
})
获取自定义属性：attr()
$(function(){
//element.prop("属性名") 获取属性值
console.log($("a").prop("href"));
$("a").prop("title","一点都不好");
$("input").change(function(){
console.log($(this).prop("checked"))
})
//2.元素的自定义属性 我们通过attr()
console.log($("div").attr("index"));
$("div").attr("index",4);
})
数据缓存:data()
//数据缓存data()这个里面的数据是存放在元素的内存里面的
$("span").data("uname","andy");
console.log($("span").data("uname"));
//这个方法获取data-index h5自定义属性 第一个不用写 是数字型
jQuery内容文本值
主要针对元素内容还有表单的值操作
1.普通元素内容html()(相当于原生innerHTML)
html() //获取元素内容
$(“div”).html()
html(“内容”) // 设置元素内容
2.普通元素文本内容text() (相当于原生innerText)
text() //获取元素内容
$(“div”).text()
text(“内容”) // 设置元素内容
3.表单标签内容val()(相当于原生value)
val() //获取元素内容
$(“input”).val()
val(“内容”) // 设置元素内容
jQuery遍历
jQuery中的隐式迭代是对相同的元素做相同的操作，遍历是对相同的元素去进行不同的操作。
语法
$("div").each(function(index,ele){
"×××";
})
//each()方法遍历匹配的每一个元素。主要用DOM处理。遍历每一个
//里面的回调函数有2个参数：index是每个元素的索引号；ele是每个DOM元素对象，不是jquery对象。
//所以要想使jquery方法，需要给这个dom元素转换成jquery对象$(domEle).
$.each(object,function(index,element){xxx;})
//$.each()方法可用于遍历任何对象。主要用于数据处理
创建元素
语法：
$("<li></li>");
动态的创建一个li标签
添加元素
1.内部添加
element.append("内容")； $(“div”).append(li)
把内容放到匹配元素的最后面，类似原生appendChild
element.prepend("内容")； $(“div”).prepend(li)
把内容放到匹配元素的最前面，类似原生prependChild
2.外部添加
element.after(“内容”)； 把内容放入目标元素后面
element.before(“内容”)；把内容放入指定目标前面
内部添加的元素是父子关系；外部添加的元素是兄弟关系
删除元素
element.remove() // 删除匹配的元素包括自身（属于自杀式删除）
element.empty(); 只删除除自身外内部所有的内容（包括子节点）
element.html(""); 清空匹配的元素内容
jQuery尺寸、位置操作
jQuery尺寸
| 语法 | 用法 |
|---|---|
| width()/height() | 取得匹配元素宽度和高度值 只算width/height |
| innerWidth()/innerHeight() | 取得匹配元素宽度和高度 包含padding |
| outerWideth() /outerHeight() | 取得匹配元素宽度和高度 包含padding 、border |
| outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度值 包含padding、border、margin |
jQuery位置
位置主要三个：offset()、position()、scrollTop()/scrollLeft()
1.offset() 设置或获取元素偏移
1.offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
2.该方法有2个属性：left、top、offset().top 用于获取距离文档顶部的距离，offset().left获取距离文档左侧的距离
3.可以设置变偏移：ofter({top:200,left:200})
2.position()获取元素偏移
position()方法用于返回被选中元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
scrollTop()方法设置或返回被选中元素被卷去的头部。
$(document).scrollTop(300);
//被卷曲的头部scrollTop() /被卷曲的左侧 scrollLeft()
var boxTop=$(".container").offset().top;
$(window).scroll(function(){
// console.log($(document).scrollTop());
if($(document).scrollTop() >= boxTop){
$(".back").fadeIn();
}else{
$(".back").fadeOut();
}
});
//返回顶部
$(".back").click(function(){
//$(document).scrollTop(0);
$("body,html").stop().animate({
scrollTop:0
})
//不能是文档而是html和body元素做动画
})
})
jQuery事件注册
单个事件注册
语法：
element.事件(function(){})
$("div").click(functon(){ 事件处理程序})
和原生的基本一致
mouseover ==>鼠标经过
mouseout==>鼠标离开
blur==>鼠标失去焦点
focus==> 获得焦点触发
change ==>发生变化
keydown==>键盘按下
keyup==> 键盘松开
resize==> 长度
scroll==>滚动事件
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
