jQuery技术学习总结

一、jQuery简介

jQuery是一个JavaScript库，它能够简化JavaScript编程。jQuery是目前最流行的JS框架。jQuery能够兼容于目前所有主流的浏览器，包括IE6。jQuery能够对HTML元素进行选取和修改、实现JavaScript动画、选取操作dom对象、绑定事件、CSS操作、Ajax请求等。

二、第一个jQuery实例

/* $(document)：$是jQuery中的函数名称，document作为函数的参数 作用是将document对象转化为jQuery库能用的对象 ready 是jQuery中的函数 dom加载成功后会执行ready函数中的内容 function是自定义函数，在onLoad之后执行 */ $(document).ready(function () { alert("Hello jQuery") }) //与上述代码功能相同（是其简化写法） $(function(){ alert("Hello jQuery") })

三、dom对象与jQuery对象的相互转换

dom对象转换为jQuery对象 /* dom对象：使用js创建的对象 jQuery对象：使用jQuery语法创建的对象，jQuery对象是一个数组 dom对象可以与jQuery对象相互转换 dom对象转换为jQuery对象之后才可使用jQuery的函数 */ function change() { //将dom对象转换为jQuery对象 var obj = document.getElementById("id"); //使用dom的value属性性获取值 alert(obj.value); //转换 var jObj = $(obj); //显示结果 alert(jObj.val()); //val()是jQuery中的函数，下文中有详细说明 } jQuery对象转换为dom对象 function change() { //使用jQuery语法获取页面中的dom对象 var obj = $("#id").get(0); //通过数组下标获取dom对象 var n = obj.value; obj.value = n * n; //更新dom中value的值 }

四、jQuery选择器

基本选择器：id、class、标签、混合选择器等 function func1() { var obj = $("#one"); //id选择器 obj.css("background","red"); //更新css } function func2() { var obj = $(".two"); //class选择器 obj.css("background","red"); //更新css } function func3() { var obj = $("span"); //标签选择器 obj.css("background","red"); //更新css } function func4() { var obj = $("*"); //全局选择 obj.css("background","red"); //更新css } function func5() { var obj = $("#one,.two"); //混合选择器 obj.css("background","red"); //更新css } 表单选择器：根据type属性值定位 语法：$(":表单类型") function func1() { var obj = $(":text"); //文本框 alert(obj.val()); } function func2() { var obj = $(":radio"); //单选按钮 for (var i=0; i < obj.length; i++){ var dom = obj[i]; alert(dom.value); } } function func3() { var obj = $(":checkbox"); //复选框 for (var i=0; i<obj.length; i++){ var dom = obj[i]; var jobj = $(dom); alert(jobj.val()); } }

五、jQuery过滤器

基本过滤器：

1.选择第一个first，保留数组中第一个dom对象 $("选择器:first") 2.选择最后一个last，保留数组中最后一个dom对象 $("选择器:last") 3.选择数组中指定对象 $("选择器:eq(索引)") 4.选择数组中小于索引的全部dom对象 $("选择器:lt(索引)") 5.选择数组中大于索引的全部dom对象 $("选择器:gt(索引)") //基本过滤器： $(function(){ $("#btn1").click(function(){ var obj = $("div:first"); //获取所有div中第一个dom对象 obj.css("background","red"); }) $("#btn2").click(function(){ var obj = $("div:last"); //获取所有div中最后一个dom对象 obj.css("background","red"); }) $("#btn3").click(function(){ var obj = $("div:eq(2)"); //获取所有div中下标等于2的dom对象 obj.css("background","red"); }) $("#btn4").click(function(){ var obj = $("div:lt(2)"); //获取所有div中下标小于2的所有dom对象 obj.css("background","red"); }) $("#btn5").click(function(){ var obj = $("div:gt(2)"); //获取所有div中下标大于2的所有dom对象 obj.css("background","red"); }) }) 表单属性过滤器： /* 表单属性过滤器 */ $(function(){ $("#btn1").click(function(){ var obj = $(":text:enabled"); //获取所有文本框中可编辑的 obj.val("hello"); //设置文本框的值 }) $("#btn2").click(function(){ var obj = $(":checkbox:checked"); //获取所有复选框中被选中的 for(var i=0; i<obj.length; i++){ //输出获取的值 alert(obj[i].value); } }) $("#btn3").click(function(){ var obj = $("select>option:selected"); //获取所有下拉列表框中被选中的 for(var i=0; i<obj.length; i++){ //输出获取的值 alert(obj[i].value); } }) })

六、jQuery常用事件

$(function(){ //1.鼠标单击事件 $("#btn").click(function () { //添加新的按钮 $("div").append("<input type='button' id='newBtn' value='新增按钮'/>") //为新增按钮添加监听事件 $("#newBtn").on("click",function () { alert("新增的按钮被单击了"); }) }) //2.鼠标双击事件 $("div").dblclick(function () { $("div").hide(); }) //3.表单事件 $(":text").change(function(){ alert("表单已被修改") }) })

七、jQuery函数

函数：val()；text()；attr()；

val()：操作dom对象中的value属性，带参数时是给value赋值，不带参数时是取值 text()：操作数组中所有dom对象的文字显示内容属性 attr()：对val,text之外的其他属性进行操作 $(选择器).attr("属性名")：获取dom对象数组第一个对象的属性值 $(选择器).attr("属性名","属性值")：设置数组所有dom对象的指定属性值 $(function(){ $("#btn1").click(function(){ var obj = $(":text"); //获取第一个文本框值 alert(obj.val()); //获取所有文本框值 for(var i=0; i<obj.length; i++){ var dom = obj[i]; alert(dom.value); } }) $("#btn2").click(function(){ $(":text").val("三国演义"); }) $("#btn3").click(function(){ //text()函数用于获取所有div的文本值，连成一个字符串 alert($("div").text()); }) $("#btn4").click(function(){ //text("参数")函数用于设置所有div的文本值 $("div").text("hahahahahah"); }) $("#btn5").click(function(){ //attr()函数用于获取某标签指定属性的值 alert($("img").attr("src")); }) $("#btn6").click(function(){ //attr("属性名","值")函数用于设置指定属性的值 $("img").attr("src","../img/t16.jpg"); }) }) 函数：remove(); empty(); append(); html(); each()； $(function(){ $("#btn1").click(function(){ //remove()去除所有父子对象 $("select").remove(); }) $("#btn2").click(function(){ //empty()只去除所有子对象 $("select").empty(); }) $("#btn3").click(function(){ //append(参数)为指定dom对象添加元素 $("div").append("<input type='button' value='新增按钮' />"); $("div").append("<table style='border:1px solid black;'><tr><td>第一列</td><td>第二列</td></tr></table>") }) $("#btn4").click(function(){ //html()获取标签内容 alert($("span").html()); }) $("#btn5").click(function(){ //html(参数)设置指定dom对象的内容 $("span").html("我是新的<b>元素</b>"); }) $("#btn6").click(function(){ //each()循环普通数组 var arr = [11,22,33]; $.each(arr, function (i,n) { alert("i是索引："+i+",n是值："+n); }) }) $("#btn7").click(function(){ //each()循环dom对象数组 var arr = $(":text"); $.each(arr, function (i,n) { alert("i是索引："+i+",n是值："+n.value); }) }) $("#btn8").click(function(){ //each()循环json数组 var json = {"name":"张安","age":"23"}; $.each(json, function (i,n) { alert("i是key："+i+",n是值："+n); }) }) $("#btn9").click(function(){ //each()循环对象，jquery对象就是包含若干个dom对象的数组 var obj = $(":text"); $(":text").each(function (i,n) { alert("i="+i+", n="+n.value); }) }) })

八、jQuery动画

隐藏、显示 $(function () { //隐藏元素 $("#hide").click(function () { $("#view").hide(); }) //显示元素 $("#show").click(function () { $("#view").show(); }) }) 淡入、淡出 语法： $(选择器).fadeIn(speed,callback) 语法： $(选择器).fadeOut(speed,callback) 语法： $(选择器).fadeToggle(speed,callback) 参数speed：淡入淡出的速度，取值slow、空、数字(毫秒) 参数callback：为淡入淡出后执行的函数。 $(function () { //淡入 $("#in").click(function () { $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(4000); }) //淡出 $("#out").click(function () { $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(4000); }) //fadeToggle $("#io").click(function () { $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(4000); }) }) 滑动 $(function () { //向下滑 $("#slide1").click(function () { $("#content").slideDown(); }) //向上滑 $("#slide2").click(function () { $("#content").slideUp(3000); }) //slideToggle $("#slide3").click(function () { $("#content").slideToggle("slow"); }) }) 动画 语法：$(选择器).animate({param},speed,callback) 参数speed：取值slow、空、数字(毫秒) 参数params： 参数定义形成动画的 CSS 属性 参数callback：完成动画后执行的函数 $(function () { //演示动画 $("#begin").click(function () { $("#div1").animate({ left:'200px', width:'100px', heigth:'100px' },4000); }) //停止动画 $("#stop").click(function (){ $("#div1").stop(); }) })

九、jQuery实现Ajax异步请求

见往期文章：使用jQuery实现Ajax请求