一 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>