首先JQuery是什么?
JQuery是JavaScript的函数库,它支持HTML元素的选取和操作,css操作,js特效操作,DOM遍历和修改,Ajax(可以实时的改变网页的内同)等。。。
JQuery的引入也非常的简单
<script src="jquery-2.1.4.min.js"></script>
1、jQuery选择器及常用事件
$(document).ready(function(){ //页面加载完毕 //$("#btn1").click(function(){ //id为btn1的标签的点击事件 执行function函数 // alert("hello world!"); //弹出对话框 //}); //$("#btn1").dblclick(function(){ //id为btn1的标签的双击事件 执行function函数 // alert("hello world!"); //弹出对话框 //}); // $("#btn1").mouseenter(function(){//鼠标移动到元素上边时触发的事件 // $(this).hide(); //隐藏事件 // } // ); $("#btn1").mouseleave(function(){//鼠标从元素上方移开时触发的function $(this).hide(); //隐藏事件 } ); });2、绑定事件当代码特别多,事件特别多时 $("#btn1").click这种事件消耗内存比较大,所以推荐使用绑定事件
HTML代码
<input type="button" value="按钮1" id="btn1"> <input type="button" value="按钮2" id="btn2">js代码
$(document).ready(function(){ //$("#btn1").bind("click",clickHandler1);//绑定事件 //$("#btn1").bind("click",clickHandler2); //$("#btn1").unbind("click");//解绑事件 在这一标签上的所有点击事件都将失效 //$("#btn1").unbind("click",clickHandler1);//解绑特定的事件 //1.7版本之后 推荐使用on off来绑定和解绑事件 和上边一个效果 $("#btn1").on("click",clickHandler1); $("#btn1").on("click",clickHandler2); $("#btn1").off("click"); $("#btn1").off("click",clickHandler1); }); function clickHandler1(){ alert("第一个绑定事件"); } function clickHandler2(){ alert("第二个绑定事件"); }3、jQuery选择器和事件之事件目标和冒泡
html代码:
<div style="width: 500px; height: 500px; background-color: aqua"> <ul> <li>苹果</li> <li>苹果</li> <li>苹果</li> <li>苹果</li> </ul> </div>js代码:5、jQuery之捕获$(document).ready(function(){ $("body").bind("click",bodyHandler); $("div").bind("click",divHandler1); $("div").bind("click",divHandler2); }); function divHandler2(event){ conLog(event); } function divHandler1(event){ conLog(event); //event.stopPropagation();//阻止事件向父控件传递 event.stopImmediatePropagation();//阻止一切事件 } function bodyHandler(event){ conLog(event); } function conLog(event){ console.log(event); }4、jQuery之自定义事件var ClickMeBtn; $("document").ready(function(){ ClickMeBtn = $("#btn"); //简化代码 ClickMeBtn.click(function(){ var e = jQuery.Event("MyEvent"); //自定义事件 ClickMeBtn.trigger(e); }) ClickMeBtn.bind("MyEvent",function(event){ //调用自定义事件 console.log(event); }) });
HTML代码
<p id="text">东软望海<a href="http://www.baidu.com">这是一个a标签</a></p> <input type="button" id="btn1" value="按钮1">
js代码
$(document).ready(function(){ $("#btn1").click(function(){ //alert("text:"+$("#text").text());//获取id为#text里面的所有的文本 //alert("text:"+$("#btn1").val());//获取value属性 //alert("html:"+$("#text").html()); //获取id为#text里面的全部内容 alert("attr:"+$("a").attr("href"));//获取a标签内的href属性 }); })6、jQuery之改变元素属性
HTML代码
<body> <p id="p1">hello world</p> <p id="p2">hello world</p> <input type="text" id="i3" value="东软望海"> <br/> <br/> <input type="button" id="btn1" value="按钮1"> <input type="button" id="btn2" value="按钮2"> <input type="button" id="btn3" value="按钮3"> <a href="http://www.baidu.com">先是百度 后是新浪</a> <button id="btn4">跳转</button> <br/> <br/> <p id="p5">hello world</p> <button id="btn5">按钮5</button> </body>
js代码
$(document).ready(function(){ //$("#btn1").click(function(){ // $("#p1").text("dongruanwanghai"); //改变id为#p1标签的text //}); // $("#btn2").click(function(){ //$("#p2").html("<a href='http://www.baidu.com'>百度</a>");//插入一段HTML //}); //$("#btn3").click(function(){ // $("#i3").val("dongruanwanghai");//改变id为#i3的value属性 //}); //$("#btn4").click(function(){ // //$("a").attr("href","http://www.sina.com.cn"); //改变标签a的href属性 // $("a").attr({ //同时改变a标签的好几个属性 // "href":"http://www.sina.com.cn", // "title":"东软望海" // }); //}); $("#btn5").click(function(){ $("#p5").text(function(i,oldText){ //回调 return "old:"+oldText+" new:这是新的内容"+i; }); }); });
7、jQuery之添加内容和元素
html代码
<body> <p id="p1">hello world</p> <p id="p2">hello world</p> <input type="button" id="btn1" value="按钮1"> <input type="button" id="btn2" value="按钮2"> <button οnclick="addContent()">按钮3</button> </body>
js代码
/** * 添加内容和元素 * append 往后添加 * prepend 往前添加 * before 换行(上) 往后添加 * after 换行(下) 往后添加 */ $(document).ready(function(){ //$("#btn1").click(function(){ // //$("#p1").append("this is my webpage!"); // $("#p1").prepend("this is my webpage!"); //}); // $("#btn2").click(function(){ // //$("#p2").before("thank you!"); // $("#p2").after("thank you!"); // }); }); function addContent(){ /** * 三种方式 * HTML jQuery DOM */ var text1 = "<p>hello</p>" var text2 = $("<p></p>").text("world"); var text3 = document.createElement("p"); text3.innerHTML="nihao"; $("body").append(text1,text2,text3); }
8、jQuery之删除元素
HTML代码
<body> <div id="div" style="width: 200px; height: 200px; background-color: aqua"> hello <p>hello world</p> <p>hello world</p> </div> <button id="btn">按钮</button> </body>
js代码
/** * 删除元素 * remove empty */ $(document).ready(function(){ $("#btn").bind("click",function(){ $("#div").empty(); //div里面的元素都删除了 //$("#div").remove(); //div元素包括他里面的内容全部删除 }) });