jQuery入门
jQuery介绍
/* javascript库(js函数库)： 把一些浏览器兼容的代码或者常用的函数封装在一个js文件中，这个文件就是JavaScript库 常见的JavaScript库： jQuery,Dojo,ExtJS,YUI,Prototype... jQuery下载地址： https://code.jquery.com/jquery/#jquery-all-1.x 顶级对象： 浏览器的顶级对象：window 页面中的顶级对象：document jQuery的顶级对象：jQuery($) */
jQuery对象与DOM对象互转
/* 为什么要把DOM对象转换为jQuery对象？ DOM操作很麻烦(兼容，一个功能写很多代码)-->转jQuery对象，操作简单，不需要写兼容代码 为什么要把jQuery对象转换为DOM对象？ 在jQuery操作中，有一些兼容代码没用封装就需要转DOM对象，通过原声的js代码实现兼容代码 */ // DOM对象转换为jQuery对象
// 语法: $(DOM对象)
var btnDOM = document.getElementById("btn");//DOM对象 $(btnDOM).click(function(){ alert("jQuery添加点击事件"); }); // jQuery对象转换为DOM对象
// 语法: jQuery对象[0]
var btnjQuery = $("#btn");//jQuery对象 btnjQuery[0].onclick = function(){ alert("DOM添加点击事件"); }
页面加载事件
// DOM中添加页面加载事件 // 赋值的方式添加加载事件 // 页面全部(标签，文字，图片，引入的文件)加载完毕后才触发 // 如果有多个onload事件会把前面的onload事件覆盖 window.onload = function(){ console.log("xiu"); } window.onload = function(){ console.log("kang"); } // jQuery中添加页面加载事件(1) // 调用方法的方式添加加载事件 // 页面全部(标签，文字，图片，引入的文件)加载完毕后才触发 // 多个load()方法不会被覆盖 $(window).load(function(){ console.log("ai"); }); $(window).load(function(){ console.log("xin"); }); // jQuery中添加页面加载事件(2) // 调用方法的方式添加加载事件 // 页面中基本的元素(标签)加载后就触发 // ready()方法不会被覆盖 $(window).ready(function(){ console.log("niu"); }); $(window).ready(function(){ console.log("pi"); }); // jQuery中添加页面加载事件(3) // 调用jQuery顶级对象的方法添加加载事件 // 页面中基本的元素(标签)加载后就触发 // 不会被覆盖 $(function(){ console.log("jian"); }) $(function(){ console.log("chi"); })
子元素与父元素
// 获取子元素 children(); // 获取后代元素 find(); // 获取父元素 parent(); // 获取第一个元素 $("p:first"); // 获取最后一个元素 $("p:last");
索引选择器
// 获取索引为3的元素(索引值从0开始) $("p:eq(2)"); // 获取索引小于3的元素 $("p:lt(3)"); // 获取索引大于3的元素 $("p:gt(3)"); // 获取索引大于3的2个元素 $("p:gt(3):lt(2)"); // 获取索引为奇数的元素 $("p:even"); // 获取索引为偶数的元素 $("p:add");
兄弟选择器
// 获取当前元素的兄弟元素 siblings(); // 获取当前元素的前一个兄弟元素 prev(); // 获取当元素前面的所有兄弟元素 prevAll(); // 获取当前元素的后一个兄弟元素 next(); // 获取当前元素后面的所有兄弟元素 nextAll();
属性选择器
// 获取属性为href的a标签 $("a[href]"); // 获取属性为href并且属性值为xiu的a标签 $("a[href=xiu]"); // 获取属性为href且属性值开头为x的a标签 $("a[href^=xiu]"); // 获取属性为href且属性值结尾为u的a标签 $("a[href$=xiu]"); // 获取属性为href且属性值不是xiu的a标签 $("a[href!=xiu]"); // 获取属性为href和属性为title且值为xx的a标签 $("a[href][title=xx]");
在div中添加元素(案例)
<div></div> <script> // text()-->innerText // html()-->innerHTML $("div").html("<p>p标签</p>"); </script>
模仿开关灯(案例)
<style> .cls { background-color: #000; } </style> <input type="button" value="关灯" id="btn1"/> <input type="button" value="开/关灯" id="btn2"/> <input type="button" value="开/关灯" id="btn3"/> <script> // 方式1： $("#btn1").click(function(){ // val()方法是获取表单的value值 if($(this).val() == "关灯"){ // 对象.css()添加样式 $("body").css({"backgroundColor":"#000"}); // 设置value属性值 $(this).val("开灯"); }else { $("body").css({"backgroundColor":""}); $(this).val("关灯"); } }); // 方式2： $("#btn2").click(function(){ // hasClass()判断该元素有没有该类样式 if($("body").hasClass("cls")){ // removeClass()删除类样式 $("body").removeClass("cls"); }else { // addClass()添加类样式 $("body").addClass("cls"); } }); // 方式3： $("#btn3").click(function(){ // toggleClass()原理跟方式2一样 $("body").toggleClass("cls"); }); </script>
链式编程
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> $("li").mouseover(function(){ // 在jQuery中，如果一个对象调用了一个方法，如果这个方法是设置的方式， // 那么一般调用后返回来的都是当前调用该方法的对象, // 该对象可以继续调用方法,这叫链式编程 // 对象在调用方法后返回来的不是之前的对象,此时就叫断链 // 在断链的位置直接使用end()方法,内部会自动修复断链 $(this).css("backgroundColor","red").prevAll().css("backgroundColor","blue").end().nextAll().css("backgroundColor","yellow"); // 如果使用链式编程出问题了,直接使用非链式编程解决 // $(this).css("backgroundColor","red"); // $(this).prevAll().css("backgroundColor","blue"); // $(this).nextAll().css("backgroundColor","yellow"); }); </script>
获取当前元素的索引值
<p>1</p> <p>2</p> <script> $("p").click(function(){ var index = $(this).index(); console.log(index); }); </script>
动画
<input type="button" value="隐藏" id="btn1"/> <input type="button" value="显示" id="btn2"/> <input type="button" value="自定义动画" id="btn3"/> <div style="width:100px;height:100px;background-color:red" id="dv"></div> <script> /* 基本动画 显示:show(),隐藏:hide() 原理:show():先display:hidden,然后同时放大高度,宽度和透明度,最后display:block 原理:hide():同时缩小高度,宽度和透明度,最后display:none 显示:slideDown(),隐藏:slideUp(),切换slideToggle() slideToggle():如果隐藏就显示,显示就隐藏 原理:slideUp():缩小高度,最后display:none 原理:slideDown():先display:block,然后放大高度 显示:fadeIn(),隐藏:fadeOut(),切换fadeToggle() fadeToggle():如果隐藏就显示,显示就隐藏 原理:fadeOut():先缩小透明度,最后display:none 原理:fadeIn():先display:block,然后放大透明度 参数1:动画时间(毫秒) 参数2:是一个函数,在动画执行完毕后在执行函数 */ $("#btn1").click(function(){ $("#dv").hide(1000,function(){ console.log("结束"); }); }); $("#btn2").click(function(){ $("#dv").show(1000,function(){ console.log("结束"); }); }); /* 自定义动画 参数1:修改的样式 参数2:动画的时间 参数3:是一个函数,在动画执行完毕后在执行函数 */ $("#btn3").click(function(){ $("#dv").animate({"width":"200px","height":"200px"},2000,function(){ $("#dv").animate({"width":"100px","height":"100px"},2000); }); }); </script>
元素的创建
<input type="button" value="添加" id="btn1"/> <input type="button" value="添加" id="btn2"/> <div id="dv"></div> <script> $("#btn1").click(function(){ // 要求:将a标签添加到div的子元素后面 // 父元素.append(子元素); // 子元素.appendTo(父元素); $("#dv").append($("<a href='http://www.baidu.com'>百度</a>"));//追加的方式 $("<a href='http://www.baidu.com'>百度</a>").appendTo($("#dv"));//追加的方式 // 要求:将a标签添加到div的子元素前面 // 父元素.prepend(子元素); // 子元素.prependTo(父元素); $("#dv").prepend($("<a href='http://www.baidu.com'>百度</a>"));//追加的方式 $("<a href='http://www.baidu.com'>百度</a>").prependTo($("#dv"));//追加的方式 // 要求:将a标签添加为div的后一个兄弟元素 $("#dv").after($("<a href='http://www.baidu.com'>百度</a>"));//追加的方式 // 要求:将a标签添加为div的前一个兄弟元素 $("#dv").before($("<a href='http://www.baidu.com'>百度</a>"));//追加的方式 }); $("#btn2").click(function(){ // 要求:创建a标签将a标签添加到div中 $("#dv").html("<a href='http://www.baidu.com'>百度</a>");//覆盖的方式 }); </script>
移除元素的相关方法
<div><p>这是一个p</p></div> <script> // 清空父元素的所有子元素 $("div").html(""); // 清空父元素的所有子元素 $("div").empty(); // 移除该元素 $("div").remove(); </script>
自定义属性的操作
<a>百度</a> <input type="radio" name="sex" id="radio"/>男 <input type="radio" name="sex" />女 <script> // 在a标签中添加href属性 $("a").attr("href","http://www.baidu.com");//方法1 $("a").prop("href","http://www.baidu.com");//方法2 // attr()可以设置自定义属性,而prop()不可以 $("a").prop("index1","1");//失败 $("a").attr("index2","2");//成功 // 获取属性值 console.log($("a").attr("href"));//http://www.baidu.com console.log($("a").prop("href"));//http://www.baidu.com // 设置单选框选中 $("#radio").attr("checked",true);//方法1 $("#radio").prop("checked",true);//方法2 // 获取选中和未选中的checked属性值 // 一般操作属性值只有布尔类型时,应该使用prop()方法 console.log($("#radio").attr("checked"));//选中:checked 未选中:undefined console.log($("#radio").prop("checked"));//选中:true 未选中:false </script>
全选与反选
<div><input type="checkbox" id="check" /></div> <div id="dv"> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> </div> <script> $("#check").click(function(){ $("#dv").find("input").prop("checked",$(this).prop("checked")) }); $("#dv").find("input").click(function(){ // $("#dv :checked")表示获取id为dv里面选中的checked属性 var ckLength = $("#dv :checked").length;//获取选中的个数 // $("#dv :checked")表示获取id为dv里面所有的input标签 var zongLeng = $("#dv :input").length;//获取总个数 $("#check").prop("checked",ckLength==zongLeng); }); </script>
设置和获取元素的height,width,left和top
<style> div { position: absolute; overflow: auto; width: 100px; top: 200px; height: 100px; left: 200px; background-color: red; } </style> <div>地铁太挤工作不易,你可曾见过火车上肩扛手提,许多我们叫爸的人拖着比自己都高的行李奔赴生计压力太大生活艰辛.</div> <script> // 要求:设置div的width,height,left,top为原来的2倍 // 获取div的高度:得到的是String类型 var h = $("div").css("height"); // 设置div的高度:需要转换为数字类型才能进行运算 $("div").css("height",parseFloat(h)*2); // 获取div的宽度:得到的是Number类型 var h2 = $("div").width(); // 设置div的宽度 $("div").height(h2*2); // 获取div的left与top // offset()获取的是一个对象,里面有两个元素left与top var l = $("div").offset().left; var t = $("div").offset().top; // 设置div的left与top $("div").offset({"top":l*2,"left":t*2}); // 添加滚动事件 $("div").scroll(function(){ // 获取垂直滚动后的距离 console.log($(this).scrollTop()); // 获取水平滚动后的距离 console.log($(this).scrollLeft()); }); </script>
为元素添加和解绑事件的几个方式
<div> <input type="button" value="按钮" id="btn"/> </div> <script> // 为元素添加事件1 // $("#btn").mouseenter(function(){ // console.log("鼠标进入事件"); // }); // $("#btn").mouseleave(function(){ // console.log("鼠标离开事件"); // }); // 为元素添加事件2 // $("#btn").mouseenter(function(){ // console.log("鼠标进入事件"); // }).mouseleave(function(){ // console.log("鼠标离开事件"); // }); // 为元素添加事件3 // $("#btn").bind("mouseleave",function(){ // console.log("鼠标离开事件"); // }); // $("#btn").bind("mouseenter",function(){ // console.log("鼠标进入事件"); // }); // 为元素添加事件4 // $("#btn").bind("mouseleave",function(){ // console.log("鼠标离开事件"); // }).bind("mouseenter",function(){ // console.log("鼠标进入事件"); // }); // 为元素添加事件5 // $("#btn").bind({"mouseenter":function(){ // console.log("鼠标进入事件"); // },"mouseleave":function(){ // console.log("鼠标离开事件"); // }}); // bind()解绑事件 // $("#btn").unbind(); 解绑该元素的所有事件 // $("#btn").unbind("mouseleave mouseenter"); 解绑该元素中的鼠标进入和离开事件 // 为子元素添加事件1 // $("div").delegate("input","mouseenter",function(){ // console.log("鼠标进入事件"); // }); // delegate()解绑事件 // $("div").undelegate(); 解绑子元素的所有事件 // $("div").undelegate("input","mouseenter mouseleave"); 解绑子元素input标签中的鼠标进入和离开事件 // 为子元素添加事件2 // $("div").on("mouseenter","input",function(){ // console.log("鼠标进入事件"); // }); // on()解绑事件 // $("div").off(); 解绑该元素和子元素的所有事件 // $("div").off("mouseenter mouseleave"); 解绑该元素和子元素的鼠标进入和离开事件 // $("div").off("","p"); 解绑子元素p标签中的所有事件 // $("div").off("mouseenter mouseleave","p"); 解绑子元素p标签中的鼠标进入和离开事件 // $("div").off("click","**"); 解绑子元素的点击事件
// 阻止事件冒泡
// 在事件的后面添加 return false 就可以阻止事件冒泡
</script>
事件的触发
鼠标事件
// 为document添加鼠标按下事件 $(document).mousedown(function(e){ console.log(e.keyCode);//获取按下键盘的键 console.log(e.button);//0鼠标左键 1鼠标滚轮键 2鼠标右键 if(e.altKey){ console.log("按下alt键的同时按下鼠标"); }else if(e.shiftKey){ console.log("按下shift键的同时按下鼠标"); }else if(e.ctrlKey){ console.log("按下ctrl键的同时按下鼠标"); } });
1
