一 JQuery是轻量级的js库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
二 JQuery对象：是通过jQuery包装DOM对象后产生的对象， jquery的基础语法：$(selector).action() 。
JQuery中文文档说明 http://jquery.cuishifeng.cn/
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象 var variable = DOM 对象 $variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
三 选择器&筛选器：
选择器：
基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
基本筛选器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
属性选择器
$('[id="div1"]') $('["alex="sb"][id]')
表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
筛选器
过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
查找筛选器
查找子标签： $("div").children(".test") $("div").find(".test")
向下查找兄弟标签： $(".test").next() $(".test").nextAll()
$(".test").nextUntil()
向上查找兄弟标签： $("div").prev() $("div").prevAll()
$("div").prevUntil()
查找所有兄弟标签： $("div").siblings()
查找父标签： $(".test").parent() $(".test").parents()
$(".test").parentUntil()
四 操作元素（属性，css, 文档处理）
事件
- 页面载入：相当于js里的onload函数，等页面加载完再处理该函数里的内容
$(document).ready(function(){}) -----------> $(function(){}) - 事件委派：（对新增的标该签事件也存在）
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数（写了selector是委派给子标签，没写是本标签绑定事件） - 事件切换：
$('').hover(function(){},function(){}) -----------> 第一个函数是鼠标悬浮的时候触发的函数，相当于mouseenter事件，第二个函数是鼠标离开时触发的事件，相当于mouseleave事件
属性操作：
- css类
$("").addClass(class|fn) 增加一个属性 $("").removeClass([class|fn]) 删除某个属性 - 属性
$("").attr(); attr('class')取值，attr('class','c1')赋值 $("").removeAttr(); $("").prop();
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 //需要使用prop方法去操作才能获得正确的结果。$("").removeProp(); - html 代码／文本／值
$("").html([val|fn]) //取该标签下的所有的子标签和文本 $("").text([val|fn]) //取标签文本 $("").val([val|fn|arr]) //取有固有属性value属性的值，比如input标签 - css 属性操作
$("#c1").css({"color":"red","fontSize":"35px"})
each 循环
- 方式一$.each(obj,fn)
li=[10,20,30,40]; dic={name:"yuan",sex:"male"}; $.each(li,function(i,x){ console.log(i,x) });
- 方式二：$("").each(fn) ---- $(this) 代指当前标签
$("tr").each(function(){ console.log($(this).html()) })备注：each 里的return 相当于python里的continue,只是退出单次循环，return false相当于break退出所有循环
文档节点处理：
//创建一个标签对象 $("<p>") //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty() $("").remove([expr]) //复制 $("").clone([Even[,deepEven]])
动画效果 三组的操作都一样，只是效果有点区别
- 显示隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../day49/jquery-3.2.1.js"></script> </head> <body> <p> hello world </p> <button class="hides"> hide</button> <button class="shows">show</button> <button class="toggles">toggle</button> <script> $('.hides').click(function () { $('p').hide(1000) }); $('.shows').click(function () { $('p').show(1000) }); //toggle 会自动判断状态，如是当前是隐藏的则显示，显示的则隐藏 $('.toggles').click(function () { $('p').toggle(1000) }) </script> </body> </html> - 滑动 slideDown／slideUp/slideToggle
- 淡入淡出 fadeIn/fadeOut/fadeToggle
css操作
1 位置操作
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pane_move</title>
<script src="../day49/jquery-3.2.1.js"></script>
<style>
*{padding: 0;
margin: 0}
.box{ 200px;
height: 200px;
background-color: greenyellow}
</style>
</head>
<body>
<div class="box"></div>
<script>
//offset的定位以document的原点为参照物。
var mouse_x = 0;
var mouse_y = 0;
$('.box').mouseover(function () {
$(this).css('cursor','pointer')
});
$('.box').mousedown(function (e) {
mouse_x = e.clientX;
mouse_y = e.clientY;
var orient_y = $('.box').offset().top;
var orient_x = $('.box').offset().left;
$(document).mousemove(function (e) {
var new_x = e.clientX;
var new_y = e.clientY;
var x = new_x - mouse_x + orient_x;
var y = new_y - mouse_y + orient_y;
$('.box').offset({left:x,top:y})
});
$(document).mouseup(function () {
$(document).off()
})
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css_position</title>
<style>
*{padding: 0;
margin: 0}
.box1{ 200px;
height: 200px;
background-color: #84a42b;
}
.outer{position: relative}
.box2{ 200px;
height: 200px;
background-color: yellow}
</style>
<script src="../day49/jquery-3.2.1.js"></script>
</head>
<body>
<div class="box1"></div>
<div class="outer">
<div class="box2"></div>
</div>
<script>
//position和cssz中的position相似，以父标签为参照物，如果父标签没设position属性，则以设置了position的父标签的父亲为参照物。
console.log($('.box1').position());
console.log($('.box2').position())
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>return_top</title>
<script src="../day49/jquery-3.2.1.js"></script>
<style>
.box{ 100%;
height: 2000px;
background-color: #999999}
.return{ 70px;
height: 40px;
font-weight: 800;
color: white;
background-color: #396bb3;
line-height: 40px;
text-align: center;
position: fixed;
bottom: 10px;
right: 10px;
display:none}
</style>
</head>
<body>
<div class="box"></div>
<div class="return">TOP</div>
<script>
$(window).scroll(function () {
if($(window).scrollTop()>200){
$('.return').show()
}
else {
$('.return').hide()
}
});
$('.return').click(function () {
$(window).scrollTop(0)
})
</script>
</body>
</html>
2 尺寸操作
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tagsize</title>
<script src="../day49/jquery-3.2.1.js"></script>
<style>
.box{ 200px;
height: 200px;
background-color: #84a42b;
padding: 50px;
border: solid 10px greenyellow}
</style>
</head>
<body>
<div class="box"></div>
<script>
console.log($('.box').width()); //200 文本区
console.log($('.box').height()); //200
console.log($('.box').innerWidth()); //300 带padding 区
console.log($('.box').innerHeight()); //300
console.log($('.box').outerWidth()); //320 带border区
console.log($('.box').outerHeight()); //320
</script>
</body>
</html>