jQuery
目录
jQuery简述
实现同一功能，不同写法：
js写法：document.getElementbyId("id")
jquery写法：$("#id")
jquery与js：
jQuery是Javascript的一个框架，不仅是兼容CSS3，同时兼容各种浏览器
jQuery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法。
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
jquery基本语法： $(selector).action()
var $variable = jQuery 对象 //声明jQuery对象约定俗成在对像前增加$
var variable = DOM 对象 //js对象
$variable[0] //表示将jQuery对象转换为DOM对象
$("#id").html();
$("#id")[0].innerHTML; //转换为DOM对象就可以调用DOM方法
选择器和筛选器
选择器
1.基本选择器
$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div") //多元素选择，逗号分隔
2.层级选择器
$(".out div") //后代选择
$(".out>div") //子代选择
$(".out+div") //毗邻选择，向下紧挨的p被选择
$(".out~div") //兄弟选择
3.基本筛选器
$("li:first") //index第一个元素
$("li:last") //index最后一个元素
$("li:eq(n)") //index第n个元素
$("li:even") //选取每个带有偶数 index 值的元素
$("li:odd") //选取每个带有基数 index 值的元素
$("li:gt(n)") //选取每个index大于n的元素
$("li:lt(n)") //选取每个index小于n的元素
4.属性选择器
$("[id = 'sb']") //固有属性
$("[alex = 'sb'][class = 'mb']") //自定义属性,多属性选取
5.表单选择器
$("[type='text']")
$(":text") //适用于input标签
筛选器
1.过滤选择器
$("li").eq(2)
$("li").first()
$("ul li").hasclass("test") //无序列表ul下的li，有class为test的元素
2.查找选择器
$("div").children(".test") //div子代元素带有class为test的元素
$("div").find(".test") //div后代元素带有class为test的元素
.find() 和 .children() 方法类似，不过后者只沿着 DOM 树向下遍历单一层级。
$(".test").next() //筛选每个匹配元素之后紧邻的同辈元素
$(".text").nextAll() //筛选每个匹配元素之后全部同辈元素
#(".test").nextUntil(".test") //查找跟随calss为test的同胞元素，直到下一个calss为test的元素
$("div").prev() //筛选每个匹配元素之前紧邻的同辈元素
$("div").prevAll()
$("div").prevUntil()
$(".test").parent() //class为test的元素的父元素
$(".test").parents() //获得当前匹配元素集合中每个元素的祖先元素
$(".test").parentUntil() //获得当前匹配元素集合中每个元素的祖先元素，直到。。。
$("div").siblings() //获得匹配集合中每个元素的同胞
操作元素
属性操作
属性：
$().attr(); //操作自定义属性
$().removeAttr();
$().prop(); //操作固有属性，prop("属性名")表述取值，prop("属性名"，属性值)表述赋值
$().removeProp();
class：
$().addClass(class|fn)
$().removeClass([class|fn])
HTML代码／文本／值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr]) //input标签的text、checkbox、button，必须是固有属性，才能取value
css
$().css("color","red")
文档操作(节点插入)
创建标签
$("<p>")
内部插入
append //插入标签
appendto //插入到标签
prepend
prependto
外部插入
after //同级后插入
before //同级前插入
替换
replaceWith
删除
empty //清空标签内容
remove //删除标签
克隆
clone()
css操作
CSS ： 设置HTML的CSS样式
$().css(name|pro|[,val|fn])
位置
偏移量：$("").offset([coordinates])
var $p_offset = $(".p1").offset(); //偏移量对象
var $left = $p_offset.left; //获取距左边距离px
var $top = $p_offset.top; //获取剧顶部距离px
$(".p1").offset({left: 100, top: 200}); //重新设置偏移对象的left，top偏移距离
position偏移：$("").position()
<div class="t1"></div>
<div class="box1" style="position: relative">
<div class="box2">
</div>
</div>
<p class="p2"></p>
<script src="jquery-3.2.1.js"></script>
<script>
var $p_position = $(".box2").position(); //相对于父元素的偏移量
var $left = $p_position.left;
var $top = $p_position.top;
$(".p2").text("the left:" + $left + "the top:" + $top);
</script>
滚动条px位置:
$("").scrollTop([val])、
$("").scrollLeft([val])
//返回页面顶部
<script>
$(".top").click(function () {
$(window).scrollTop(0);
})
// //js
// document.onscroll = function () {
// if ($(window).scrollTop()>200){
// $(".top").show();
// }else {
// $(".top").hide();
// }
// }
//jquery
$(window).scroll(function () {
if ($(window).scrollTop()>200){
$(".top").show();
}else {
$(".top").hide();
}
})
</script>
尺寸
$("").height([val|fn]) //内容高
$("").width([val|fn]) //内容宽
$("").innerHeight() //内容+padding
$("").innerWidth() //内容+padding
$("").outerHeight([soptions]) //内容+padding+broder
$("").outerWidth([options]) //内容+padding+broder
outerHeight(true) //内容+padding+broder+margin
jquery循环
//方式1
arr = [123,456,"hello"]
obj = ["name":"alex","age":22]
$.each(arr,function(i,j){
//i索引
//j值
})
$.each(obj,function(i,j){
//i键
//j值
})
//方式2
$("ul li").each(function(){
if ($(this).hasClass("item")){
//遍历得到li中class为item的元素
}
})
动画效果
显示／隐藏
show
hide
toggle
滑动效果
slideDown
slideUp
slideToggle
淡入淡出
fadeIn
fadeOut
fadeToggle
fadeTo
回调函数
当某一个动作执行完成之后，自动触发的函数
$("#show").click(function(){
$("img").show(1000,function(){
alert("回调函数")；
})；
})；
事件
事件处理
on（events,[selector],[data],fn）
.on方法为动态添加的元素也能绑上指定事件
$('ul li').on('click', function(){console.log('click');})
事件切换
hover([over,]over)
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
载入
ready(fn) //类似js中的window.onload = function(){}，当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
$(document).ready(function(){})
//简写
$(function(){})
插件机制
$.extend(object) //为JQuery 添加一个静态方法。
$.fn.extend(object) //为JQuery实例添加一个方法。
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.rotation {
margin: 20px auto;
width: 730px;
height: 336px;
border: 1px solid black;
position: relative;
}
.image-box {
list-style: none;
}
.image-box li {
position: absolute;
top: 0;
left: 0;
display: none;
}
.point-bar {
list-style: none;
position: absolute;
bottom: 0;
left: 200px;
background-color: hsla(0, 0%, 100%, .3);
border-radius: 12px;
}
.point-bar li {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 100%;
background-color: #fff;
margin-right: 14px;
}
.buttons .btn {
position: absolute;
margin-top: -50px;
top: 50%;
width: 40px;
height: 100px;
background-color: #b4b4b4;
opacity: 0.5;
color: white;
line-height: 100px;
text-align: center;
display: none;
}
.left {
left: 0;
}
.right {
right: 0;
}
.point-bar .active {
background-color: #cc0000;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="rotation">
<ul class="image-box">
<li style="display: inline-block"><a><img
src="http://p4.music.126.net/MD1Rxeu4O21KQ9SBgx0EBQ==/18880813672319248.jpg">
</a></li>
<li><a><img
src="http://p3.music.126.net/JK8RyycpXfk4-lm7Q_4t-g==/18760966906664678.jpg"></a></li>
<li><a><img
src="http://p3.music.126.net/PISYq4PazfIgC9W0mylJag==/19082024300201561.jpg"></a></li>
<li><a><img
src="http://p4.music.126.net/eo5HXwCHTAJLB4lbyw2b3A==/19082024300201562.jpg"></a></li>
<li><a><img
src="http://p4.music.126.net/J0DSsHZ77hvYToqX2iWEQA==/18992963858350072.jpg"></a></li>
<li><a><img
src="http://p4.music.126.net/sjeFlnGonRNfSrx6vehk-w==/18614731860189474.jpg"></a></li>
<li><a><img
src="http://p3.music.126.net/whwudcQ5KYYUwR-VVLj22Q==/18866520021161174.jpg"></a></li>
<li><a><img
src="http://p4.music.126.net/1EZqWQYmxlzRU3iAJo-_Qw==/18660911348461171.jpg"></a></li>
</ul>
<ul class="point-bar">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="buttons">
<div class="left btn"> <</div>
<div class="right btn"> ></div>
</div>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
var i = 0;
var l = $(".image-box li").length;
function go_on() {
i++;
$(".image-box li").eq(i).fadeIn(200).siblings().fadeOut(200);
$(".point-bar li").eq(i).addClass("active").siblings().removeClass("active");
if (i == l - 1) {
i = -1;
}
// console.log(i);
}
var timer = setInterval(go_on, 1000);
function go_back() {
i--;
$(".image-box li").eq(i).fadeIn(200).siblings().fadeOut(200);
$(".point-bar li").eq(i).addClass("active").siblings().removeClass("active");
if (i == -1) {
i = l-1;
}
// console.log(i);
}
$(".rotation").hover(function () {
$(".buttons .btn").show();
clearInterval(timer);
}, function () {
$(".buttons .btn").hide();
timer = setInterval(go_on, 1000);
});
$(".point-bar li").mouseover(function () {
i = $(this).index();
$(".image-box li").eq(i).fadeIn(200).siblings().fadeOut(200);
$(".point-bar li").eq(i).addClass("active").siblings().removeClass("active");
})
$(".right").click(go_on);
$(".left").click(go_back);
</script>
</html>
