前端基础-jquery
1.寻找元素(选择器和筛选器)
1.1.1 基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
1.1.2 层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
1.1.3 基本选择器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
1.1.4 属性选择器
$("[id='div1']") $("[name='sb'][id]")
1.1.5 表单选择器
$("[type='text']")------>$(":text") 注意只适用于input标签:$("input:checked")
1.1.6 表单属性选择器
:enabled
:disabled
:checked
:selected
<body> <form> <input type="checkbox" value="123" checked> <input type="checkbox" value="456" checked> <select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3" selected="selected">Trees</option> <option value="3" selected="selected">Trees</option> </select> </form> <script src="jquery.min.js"></script> <script> // console.log($("input:checked").length); // 2 // console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1 $("input:checked").each(function(){ console.log($(this).val()) }) </script> </body>
1.2筛选器
1.2.1 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
1.2.2 查找筛选器
查找子标签: $("div").children(".test") $("div").find(".test")
向下查找兄弟标签: $(".test").next() $(".test").bextAll()
$(".test").nextUntil()
向上查找兄弟标签: $("div").prev() $("div").prevAll()
$("div").prevUntil()
查找所有兄弟标签: $("div").siblings()
查找父标签: $(".test").parent() $(".test").parents()
$(".test").parentUntil()
2.操作元素而(属性,css,文档处理)
2.1 事件
页面载入
ready(fn) //当DOM载入就绪就可以查询及操纵时绑定一个要执行的函数
$(document).ready(function(){})-------->$(function(){})
事件绑定
语法: 标签对象.事件(函数)
eg:$("p").click(function(){})
事件委派
$("").on(eve,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数 <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <hr> <button id="add_li">Add_li</button> <button id="off">off</button> <script src="jquery.min.js"></script> <script> $("ul li").click(function(){ alert(123) }); $("#add_li").click(function(){ var $ele=$("<li>"); $ele.text(Math.round(Math.random()*10)); $("ul").append($ele) }); // $("ul").on("click","li",function(){ // alert(456) // }) $("#off").click(function(){ $("ul li").off() }) </script>
事件切换
hover事件:
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法,这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态.
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .test{ width: 200px; height: 200px; background-color: wheat; } </style> </head> <body> <div class="test"></div> </body> <script src="jquery.min.js"></script> <script> // function enter(){ // console.log("enter") // } // function out(){ // console.log("out") // } // $(".test").hover(enter,out) $(".test").mouseenter(function(){ console.log("enter") }); $(".test").mouseleave(function(){ console.log("leave") }); </script> </html>
2.2 属性操作
---------------------css类---------------------
$("").addClass(class|fn)
$("").removeClass([class|fn])
---------------------属性---------------------
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
---------------------HTML代码/文本/值---------------------
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
-------------------------
$("#c1").css({"color":"red","fontSize":"35px"})
attr方法使用:
<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见 <script> //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 //需要使用prop方法去操作才能获得正确的结果。 // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // false // ---------手动选中的时候attr()获得到没有意义的undefined----------- // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // true console.log($("#chk1").prop("checked"));//false console.log($("#chk2").prop("checked"));//true console.log($("#chk1").attr("checked"));//undefined console.log($("#chk2").attr("checked"));//checked </script>
2.3 each循环
方式一:
格式: $.each(obj,fn)
li=[10,20,30,40];
dic={name:"xxbb",sex:"male"}
$.each(li,function(i,j){
console.log(i,j) //i为索引,j为值
});
$.each(dic,function(x,y){
console.log(x,y) //x为键,y为值
})
方式二:
格式:$("").each(fn)
$("tr").each(function(){
console.log($(this).html())
})
其中,this代指当前循环标签
2.4 文档节点处理
//创建一个标签对象 $("<p>") //内部插入 $("").append(content|fn) ------------->$("p").append("<b>Hello</b>"); $("").appendTo(content) ------------->$("p").appendTo("div"); $("").prepend(cntent|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]])
2.5 动画效果
显示隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> <script> $(document).ready(function() { $("#hide").click(function () { $("p").hide(1000); }); $("#show").click(function () { $("p").show(1000); }); //用于切换被选元素的 hide() 与 show() 方法。 $("#toggle").click(function () { $("p").toggle(); }); }) </script> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <p>hello</p> <button id="hide">隐藏</button> <button id="show">显示</button> <button id="toggle">切换</button> </body> </html>
滑动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> <script> $(document).ready(function(){ $("#slideDown").click(function(){ $("#content").slideDown(1000); }); $("#slideUp").click(function(){ $("#content").slideUp(1000); }); $("#slideToggle").click(function(){ $("#content").slideToggle(1000); }) }); </script> <style> #content{ text-align: center; background-color: lightblue; border:solid 1px red; display: none; padding: 50px; } </style> </head> <body> <div id="slideDown">出现</div> <div id="slideUp">隐藏</div> <div id="slideToggle">toggle</div> <div id="content">helloworld</div> </body> </html>
淡入淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> <script> $(document).ready(function(){ $("#in").click(function(){ $("#id1").fadeIn(1000); }); $("#out").click(function(){ $("#id1").fadeOut(1000); }); $("#toggle").click(function(){ $("#id1").fadeToggle(1000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); }); }); </script> </head> <body> <button id="in">fadein</button> <button id="out">fadeout</button> <button id="toggle">fadetoggle</button> <button id="fadeto">fadeto</button> <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div> </body> </html>
回调函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> </head> <body> <button>hide</button> <p>helloworld helloworld helloworld</p> <script> $("button").click(function(){ $("p").hide(1000,function(){ alert($(this).html()) }) }) </script> </body> </html>
