前端基础--jquery操作元素
1.事件
1.1事件的绑定：
jquery的事件绑定方式1： jquery对象.事件(function){}
例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.1.js"></script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <button>添加</button> <script> $("ul li").click(function () { alert("ok") }) </script> </body> </html>
jquery的事件绑定on方法： jquery对象.on("事件",function()){}
例子：
$("button").on("click",function () {
alert("这是一个添加按钮")
})
1.2.事件委派
事件委派就是把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.1.js"></script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <button>添加</button> <script> $("ul li").click(function () { alert("ok") }) $("button").on("click",function () { var $li=$("<li>"); $li.html("444"); $("ul").append($li) }) </script> </body> </html>
上述代码中，如果不委派事件，新添加的html标签是“444”点击是不会触发事件的
需要绑定个事件，这样点击新添加的444就同样也会出现弹出“ok”的窗口。
<script> $("ul li").click(function () { alert("ok") }) $("button").on("click",function () { var $li=$("<li>"); $li.html("444"); $("ul").append($li) }) $("ul").on("click","li",function () { #绑定个事件 alert("ok") }) </script>
ready方法：
当事件定义在页面的上方的时候，导致绑定事件失败。这个时候可以使用ready方法----当整个页面加载完成，在绑定方法。
例子：
方法1： $(function () { $("button").click(function () { var $li=$("<li>"); // <li></li> $li.html("444"); $("ul").append($li) }); 方法2： $(document).ready(function () { $("button").click(function () { var $li=$("<li>"); // <li></li> $li.html("444"); $("ul").append($li) })
1.3.事件切换
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.属性操作
--------------------------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"})
3.each循环
each的遍历循环方式1： $.each(obj,function)
var arr=[11,2,343]; var obj={"name":"yuan","age":"322"}; $.each(obj,function (i,v) { console.log(i,v) }); $.each(arr,function (i,v) { console.log(i,v) })
each的遍历循环方式2：$("").each(function)
$("p").each(function (i) {
console.log(i);
if(i==1){
$(this).css("color","red")
}
console.log($(this).html())
})
4.文档节点操作
//创建一个标签对象 $("<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]])
5.动画效果
5.1显示隐藏
<!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>
5.2滑动
<!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>
5.3淡入淡出
<!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>
5.4回调函数
<!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>
