jquery基础

本周学习知识点： 一、javascript库   二、jQuery语法     三、jQuery的学习   ①、jQuery选择器   ②、空格、无空格的区别           ③、增删改查操作       ④、jQuery 事件和动画     ⑤、位置属性     一、javascript库 ①、jQuery：是封装的javascript 库，除了这个库文件之外，还有： ②、dojo：封装的javascript库 ③、prototype：老的javascript库 ④、ExtJs：企业级的javascript 框架将产用的方法封装起来   jQuery，是轻量级的框架（我们使用压缩版的，不超过100KB），而且浏览器兼容型好。 二、区别jQuery的对象 和 DOM对象 $()是jQuery的对象，jQuery 对象可以理解成是DOM对象的集合。 $(document).ready(function(){ //整个document结构加载完毕就执行函数 })  window.onload= function(){ //当整个DOM内容加载完毕，执行函数 }   三、复习CSS选择器      元素选择器 td{}   li{}      Id选择器   #id{}      类选择器   .class{}      群组选择器   td,p,div{}      后代选择器   div p{}       通配选择器   *{}   四、jQuery选择器 ①、基本选择器     1,根据id匹配元素 $("#div")     2,根据给定的类名匹配元素 $(".div")     3,根据给定的元素名匹配元素$("div")     4,*匹配所有的元素       5,集合元素,将每个选择器匹配到的元素合并后一起返回$("span,a") ②、层次选择器     1,后代元素选择器 空格     2,子元素选择器    >     3,相邻元素(紧接在前一个元素之后的选择器)  +    4,兄弟元素选择器   ~ ③、过滤选择器    1,所有div元素中，第一个div   $("div:first")    2,所有div元素中,最后一个div  $("div:last")    3,获取索引是偶数的所有元素,索引从0开始  $("div:even")    4,获取索引是奇数的所有元素，索引从0开始 $("div:odd")    5,获取索引等于index的所有元素  $("div:eq(1)")    6,索引大于小于  $("div:gt(1)")  $("div:lt(1)")    7,获取网页中所有的h标签内容  $(":header")    8,匹配网页中正在发生动画效果的元素$(":animated") ④、表单选择器       (1)选取所有的input,textarea,select,button  $(":input")       (2)选取所有的单行文本框  $(":text")       (3)选取所有的密码框      $(":password")       (4)选取所有的单选框      $(":radio")       (5)选择所有的复选框      $(":checkbox")       (6)选择所有的提交按钮    $(":submit")       (7)选择所有的文件上传域  $(":file")    ⑤、内容过滤选择器       匹配包含给定文本的元素 $("div:contains('John')")    ⑥、可见性过滤选择器        匹配所有不可见元素，或者type为hidden的元素$("tr:hidden")        匹配所有可见元素     $("tr:visible")   ⑦、属性过滤选择器         匹配给定的属性是某个特定值的元素        $("input[name='newsletter']") 五、空格、无空格的区别    1,空格    var descent = $(".test :hidden").length;    获得class属性为test的元素下面的所有隐藏元素(后代元素)      2,没空格    var ele = $(".test:hidden").length;    获得所有的隐藏的class为test的元素 六、jQuery DOM操作  ①、jQuery 查找节点   (1)查找元素节点        (2)查找属性节点attr() ②、jQuery 创建节点     (1)创建元素节点  $("<li></li>") (2)创建属性节点 $("<li title="apple"></li>") (3)创建文本节点 $("<li title="apple">text</li>") ③、jQuery 插入节点     (1)append()    我追加谁 (2)appendTo()  依附于谁 ④、jQuery 删除节点     (1)根据参数删除指定的元素    remove()    (2)清空节点内容 empty() ⑤、复制和替换节点    1,复制节点    clone() 参数    2,替换节点       replaceWith() 使用xxx替换       replaceAll()     用xxx替换All() ⑥、包裹节点     将某个节点，用其他标记(元素)包裹起来。     wrap(参数)  将匹配到的每一个元素用参数包裹起来     wrapAll() 将所有匹配的元素用一个元素来包裹 ⑦、jQuery 属性操作     1,attr()       获取和设置属性     2,removeAttr() 删除属性 ⑧、jQuery 样式操作     1,attr()         获取样式和设置样式     2,addClass()     追加class样式     3,removeClass()  移除样式      4,toggleClass()      切换样式 ⑨、设置和获取html,文本和值     1,html()  读取某个元素中html内容     2,text()  某元素中的文本内容     3,val()    获取某元素的值   ⑩、遍历节点     1,children() 取得匹配元素的子元素的集合       2,next()     取得匹配元素后面紧邻的同辈元素      3,prev()     取得匹配元素前面紧邻的同辈元素      4,siblings() 取得匹配元素前后所有的同辈元素   七、jQuery 事件和动画 ①、jQuery中的事件     1,绑定事件 bind()     2,合成事件 hover() 悬停 toggle()点击      1，hover()光标移入时触发第一个函数;光标移出时触发第二个函数      2，toggle()第一次单击触发第一个函数,再次单击触发第二个函数     3,事件对象的属性        1，event.type  事件类型       2，event.pageX  event.pageY 鼠标的X轴 Y轴       3，event.which 鼠标单击事件中获得鼠标的左中右键                    键盘事件中获得键盘的按键     4,事件模拟操作 trigger()       参数1,触发的事件类型;       参数2,传递给事件处理函数的附加数据 八、jQuery中的动画     1,show()  和  hide()     2,fadeIn() fadeOut() fadeTo() 淡入  淡出      3,slideUp() 和 slideDown()       4，自定义动画：animate() 注意：    (1)动画都有速度参数 fast slow normal 自定义    (2)都有回调函数callback    (3)animate(params,speed,callback)需要相对定位    动画停止：        1,停止动画  stop()        2,判断是否处于动画状态 is(":animated") 九、位置属性     $(function(){ var w = $("#con").width(); var h = $("#con").height(); //alert(w+'----'+h); var position = $("#con").position(); /* for(p in position){ alert(p);      }*/ //alert(position.left); $("#con").offset({ top:100, left:300 }); })     学习总结： 一、jQuery对象和DOM对象相互转换： 为了和普通的DOM对象区别开：我们定义对象的时候，jquery对象前面加上 $，jQuery 解决了兼容性的问题，而且DOM节点的操作非常简单。因为只有转换成jquery的对象，我们才能使用jquery的方法，jquery的选择器基本上继承了css的选择器。 $(document).ready(function(){ var div = document.getElementById("div"); //将dom对象转化成jQuery的对象,$() 工厂,制造jquery对象 var $div = $(div);  //alert($div);     // alert(div.innerHTML); //使用jquery对象设置div的css样式 $div.css("font-size","30px"); //如果我想给某个元素设置多个样式 $div.css({"color":"green","background":"yellow"}); }) 二、选择器 ①、基本选择器    //通过id匹配某个元素    $("#div").click(function(){alert('hello');});    //通过类名匹配元素    $(".div").css("color","red");    //根据元素名(根据标签的名字)匹配元素    $("span").show(1000);// 显示    //查找多个元素(元素集合)    $("span,a").css("color","green");    ②、层次选择器        //后代元素选择器(查找某个元素后代元素(子元素、孙子元素))    //$("#head li").hide(2000); //两秒隐藏    //子元素选择器 查找某个元素的子元素    $("#head > span").css("font-size","50px");    //相邻元素选择器 查找某个元素相邻的元素    $("#head+a").css("font-size","30px");    //兄弟元素选择器,查找某个元素的兄弟元素    $("#head span~ul").css("background","green");    ③、过滤选择器        //匹配所有div元素中第一个    $("div:first").css("color","green");    //匹配所有div元素中最后一个    $("div:last").css("color","red");    //匹配所有div元素中索引为偶数的(索引是从0开始的)    $("div:even").css("font-size","35px");    //匹配所有div元素中索引是奇数的    $("div:odd").css("background","yellow");    //匹配索引值等于xx的元素    $("div:eq(1)").css("font-size","53px");    //索引值大于、小于xxx的  小于(lt())    $("div:gt(1)").css("color","pink");    //匹配所有的h标签    $(":header").css("font-size","50px"); ④、表单属性过滤选择器 <script> $(document).ready(function(){ //过滤选择器(表单属性过滤选择器) //筛选出被选中的复选框的value值 alert($("#form :checked").val()); //查找某个元素的所有后代元素 alert($("#form:checked").val());//表示从很多元素中筛选出指定的 //下拉列表被选中的 alert($("#form :selected").val()); }); </script> </head> <body> <form action="#" method="post" id="form"> <input type="checkbox" name="sex" value="female"/>女性 <input type="checkbox" name="sex" value="male" checked/>男性 <select> <option>PHP</option> <option>JAVA</option> <option selected>NET</option> </select> </form>                  //alert($(":input").length); $(":text") .focus(function(){ $(this).val(""); }) .blur(function(){    $(this).val("请输入用户名"); }) $(":button").click(function(){ alert("hello"); }) ⑤、可见性过滤选择器 $(document).ready(function(){ //$("div:hidden").show(1000); //$("div:visible").hide(1000); }) ⑥、属性操作 <style> .high{ font-style:italic; font-weight:bold; } </style> <script> //jQuery的属性操作基本上 使用 attr() removeAttr() //通过json格式的参数定义多个属性 $(function(){ //$(".head:last").attr({"class":"high","title":"second"}); //removeAttr()删除属性 $(".high").click(function(){ $(this).removeAttr("class");//删除当前对象身上的某个属性 }) }) </script> </head> <body> <div id="container"> <span class="head">这是行内元素</span> <span class="high">这是第二个行内元素</span> <ul> <li title="orange">橘子</li> <li>苹果</li> <li>梨</li> </ul> </div> 三、增删改查操作 ①、查找元素 <script> $(document).ready(function(){ //查找元素节点,并输出元素内容 alert($(".head").text()); //查找属性节点 //alert($("#container ul li:first").attr("title","apple")); //attr()方法 如果2个参数,表示给属性复制;如果1个参数,表示查询属性节点 alert($("#container ul li:first").attr("title"));//查询title属性的值 $("#container ul li:first").attr("title",'apple');//给title属性重新赋值 }) </script> </head> <body> <div id="container"> <span class="head">这是行内元素</span> <ul> <li title="orange">橘子</li> <li>苹果</li> <li>梨</li> </ul> </div> ②、创建元素节点 <script> $(document).ready(function(){ //创建元素节点$()参数直接写元素名,就表示创建元素 //确定其位置 1.append() 2.appendTo() $("<li>香蕉</li>").appendTo("ul"); //append() 哪个元素追加参数为子元素 $("ul").append("<li>西瓜</li>"); }) </script> </head> <body> <div id="container"> <span class="head">这是行内元素</span> <ul> <li title="orange">橘子</li> <li>苹果</li> <li>梨</li> </ul> </div> </body> ③、删除元素节点 <script> //删除元素节点 remove() empty() $(function(){ //remove()从元素集合中移除某个元素 $("#container ul li").remove();//删除所有元素 $("#container ul li").remove("ul li");//表示删除ul下面的所有li $("#container ul li").remove("ul li[title=orange]");//通过属性名找到元素 //empty()清空元素的内容,不删除 $("ul li:first").empty(); }) </script> </head> <body> <div id="container"> <span class="head">这是行内元素</span> <ul> <li title="orange">橘子</li> <li>苹果</li> <li>梨</li> </ul> </div> </body> ④、替换节点 //节点替换 replaceWith() replaceAll() $(function(){ //定位到span元素,绑定点击事件 使用谁替换谁 $(".head").click(function(){ //$(this).replaceWith("<h1>明显吗?</h1>");//使用参数替换自己 $("<p>我是段落</p>").replaceAll("span"); //前面的元素替换所有的查找到的参数 }) }) ⑤、//遍历元素节点 children() next() prev() sibs() $(function(){ //获得body下面有多少子节点 var length = $("body").children().length; //alert(length); //next() 当前元素的下一个兄弟 var orange = $("ul li[title=orange]").next(); //alert(orange.html()); //prev() 当前元素的上一个兄弟 var span = $(".high").prev().html(); //alert(span); //siblings() 当前元素的前面的和后面的兄弟姐妹元素 var sibs = $("ul li[title=apple]").siblings(); alert(sibs.length); }) ⑥、样式操作 <script> //样式操作 //通过attr()给某个元素增加一个样式 //通过addClass() 增加样式 //通过toggleClass() 增加样式, $(function(){ $("ul li[title=orange]").click(function(){ //$(this).addClass("high");//方法就是增加class属性,参数就是class属性值 $(this).toggleClass("high");//切换样式,如果有的话，就删除,如果没有就增加 }) $(".high").removeClass();//移除当前元素的class属性 }) ⑦、设置、获得元素内容 $(function(){ //html() == innerHTML //text() == innerText //val() == value alert($("ul li:first").html()); alert($("ul li:first").text()); alert($(":password").val()); }) ⑧、复制节点 //复制节点 clone() 将某个元素复制一份,然后在确定其位置 $(function(){ $("ul li[title=orange]").click(function(){ //$(this).clone().appendTo("ul"); //克隆方法默认情况下,不会复制当前元素的事件,但是我们可以通过传递参数(true)，这样在克隆节点的时候也将元素身上的事件复制 $(this).clone(true).appendTo("ul"); }) }) ⑨、包裹节点 //包裹节点 wrap() wrapAll() //什么是包裹 $(function(){ $("ul li").wrap("<b></b>");//使用参数包裹前面匹配到的每一个元素 //$("ul li").wrapAll("<b></b>");//使用参数把整体包裹起来了 }) 四、jQuery事件 ①、绑定事件bind $(function(){ //绑定事件bind("事件名称","触发的函数") //bind()方法可以给某个元素绑定多个事件 $(".head") .bind("click",function(){ $(".content").hide(3000); }) .bind("click",function(){ $(".content").show(3000); }) }) ②、事件对象属性 //事件对象(鼠标的位置、键盘的按键码) $(function(){ $(".head").bind("mousedown",function(event){ //获得事件对象 event //alert(event.type);//获得事件类型 //通过事件可以获得鼠标的状态、以及键盘按键的状态 //alert(event.pageX); //alert(event.pageY); alert(event.which); //如果是鼠标事件 获得的是 左键、右键还是中间 }) $("body").keydown(function(event){ alert(event.which);//指的是键盘的按键码 }) }) ③、合成事件 $(function(){ //合成事件 hover() toggle() //toggle(参数1,参数2)第一次点击触发第一个函数,第二次点击触发第二个函数 $(".head").toggle(function(){ $(".content").hide(3000); },function(){ $(".content").show(3000); }) //hover() 鼠标移入触发第一个函数,鼠标移除，触发第二个函数 $(".head").hover(function(){ $(".content").hide(3000); },function(){ $(".content").show(3000); }) }) ④、事件模拟操作 <script> //事件模拟操作(可以自定义事件) //触发自定义的事件的时候,会传递参数参数1:event事件对象,参数2..依次传递进来的 $(function(){ $(".head").bind("myClick",function(event,arg2,arg3,arg4){ alert(event.type); alert(arg2+arg3+arg4); }) //手动触发这个事件(参数1,触发的事件名称;参数2,传递进去的参数列表) $(".head").trigger("myClick",["name","age","gender"]); }) </script> ⑤、自定义动画 <script> //自定义动画使用animate()有3个参数 //参数1,修改的样式{} //参数2,动画时间 //参数3,callback，动画结束后执行的函数 $(function(){ $(".head") .animate({width:"+=300px",opacity:"0.5",left:"+=300px"},3000,function( ){ $(this).css("background","red"); }) }) </script> ⑥、动画效果 <script> //jquery的动画效果,通过 hide() show() fadeIn() fadeOut slideUp() slideDown() animate()来实现的 //动画效果，需要保证元素是相对定位 relative //animate()自定义动画 $(function(){ $(".head").toggle(function(){ //$(".content").fadeOut(2000);//淡出 $(".content").slideUp(2000);//向上滑入 },function(){ //$(".content").fadeIn(2000);//淡入 $(".content").slideDown(2000);//向下滑出 }); }) </script> 五、图片提示 <style> li{ list-style:none; float:left; border:1px solid #ccc; margin-right:15px; } #newImg{ font-weight:bold; } </style> <script src="./jquery-1.4.2.min.js"></script> <script> $(function(){ $("li a") .hover(function(event){ //生成一个img $("<div id='newImg'><img src='"+this.href+"'/><br/>"+this.title+"</div>") .appendTo("body") .css({"left":event.pageX+"px",'top':event.pageY+'px','position':'absolute'}); },function(){ //移除这个图像 $("#newImg").remove(); }) .mousemove(function(event){ $("#newImg").css({"left":event.pageX+20+"px",'top':event.pageY+20+'px'}) }) }) </script> </head> <body> <ul> <li><a href="./images/apple_1_bigger.jpg" title="Apple MP3"><img src="./images/apple_1.jpg"/></a></li> <li><a href="./images/apple_2_bigger.jpg" title="Apple iPod"><img src="./images/apple_2.jpg"/></a></li> <li><a href="./images/apple_3_bigger.jpg" title="Apple iPhone"><img src="./images/apple_3.jpg"/></a></li> <li><a href="./images/apple_4_bigger.jpg" title="Apple iMac"><img src="./images/apple_4.jpg"/></a></li> </ul> </body> 六、表单验证 <script> $(function(){ //先找到所有必填的表单,提示 * each方法会循环便利到每一个元素 $(".required").each(function(){ //先创建一个 * var require = $("<strong class='high'>*</strong>"); $(this).parent().append(require); }) //给输入框绑定焦点事件 $("#form :input") .focus(function(){ if(this.value==this.defaultValue){ $(this).val(""); } $(this).addClass("focus"); }) .blur(function(){ $(this).removeClass("focus"); var parent = $(this).parent();//当前对象的父类 //验证用户名 if($(this).is("#username")){ //$("span").remove("span"); $(this).parent().find("span").remove(); if(this.value==''||$(this).val().length<6){ var errmsg = "用户名不能少于6个字符"; //创建提示错误的元素 parent.append($("<span class='error'>"+errmsg+"</span>")); }else{ var okmsg = "输入正确"; parent.append($("<span class='ok'>"+okmsg+"</span>")); } } //验证邮箱 if($(this).is("#email")){ $(this).parent().find("span").remove();//当前对象的父类 if(this.value==''|| !/.+\@.+\..{2,4}/.test(this.value)){//正则的使用 var errmsg = "请输入正确的邮箱"; //创建提示错误的元素 parent.append($("<span class='error'>"+errmsg+"</span>")); }else{ var okmsg = "输入正确"; parent.append($("<span class='ok'>"+okmsg+"</span>")); } } }) //绑定点击事件 $(".sub").click(function(){ //找到所有的必填的输入框 $(".required").trigger("blur");//触发 //想知道有几个错误 var error = $(".error").length; if(error){ //说明错误数大于0 return false; } alert('ok成功'); }) }) </script> </head> <body> <form action="#" method="post" id="form"> <div> 用户名:<input type="text" id="username" value="" class="required"/> </div> <div> 邮箱:<input type="text" id="email" class="required"/> </div> <div> <input type="button" value="提交" class="sub"/> </div> </form> </body> 七、表格选中、筛选内容 <script> $(function(){ $("table tbody tr:even").addClass("even");//添加class属性 $("table tbody tr:odd").addClass("odd"); //给每一行绑定click事件 $("table tbody tr").click(function(){ //判断当前这一行是否被选中(在这里要获得当前这一行的状态) var ischecked = $(this).hasClass("selected");//判断class属性是否存在 //如果有class样式就删除,如果没有增加 //$(this)["removeClass"]("selected")==$(this).removeClass("selected") $(this)[ischecked?"removeClass":"addClass"]("selected")//三目运算符 .find(":checkbox") //查找 .attr("checked",!ischecked) }) //筛选 $("#filter").keyup(function(){ $("table tbody tr") .hide() .filter(":contains('"+this.value+"')")//过滤 .show();//再显示匹配的结果 }) }) </script> </head> <body> 筛选：<input type="text" id="filter"> <table> <thead> <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input type="checkbox" name="choice"/></td><td>张三</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="choice"/></td><td>李四</td><td>男</td><td>北京</td></tr> <tr><td><input type="checkbox" name="choice"/></td><td>王五</td><td>女</td><td>天津</td></tr> <tr><td><input type="checkbox" name="choice"/></td><td>赵六</td><td>男</td><td>保定</td></tr> <tr><td><input type="checkbox" name="choice"/></td><td>张三</td><td>女</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="choice"/></td><td>张三</td><td>男</td><td>浙江杭州</td></tr> </tbody> </table> </body> 八、折叠菜单 <script> $(function(){ $(".parent").click(function(){ //1.点击之后,给当前元素设置样式 $(this) .toggleClass("selected")//切换样式 .siblings(".child_"+this.id) .toggle() }).click();//调用 }) </script> </head> <body> <table> <thead><tr><th>姓名</th><th>性别</th><th>居住地</th></tr></thead> <tbody> <tr class="parent" id="row_1"><td colspan="3">前台设计组</td></tr> <tr class="child_row_1"><td>张三</td><td>男</td><td>湖北武汉</td></tr> <tr class="child_row_1"><td>李四</td><td>女</td><td>湖南长沙</td></tr> <tr class="child_row_1"><td>小王</td><td>女</td><td>湖南长沙</td></tr> <tr class="parent" id="row_2"><td colspan="3">后台开发组</td></tr> <tr class="child_row_2"><td>王五</td><td>男</td><td>湖北武汉</td></tr> <tr class="child_row_2"><td>赵六</td><td>女</td><td>湖南长沙</td></tr> <tr class="parent" id="row_3"><td colspan="3">数据库设计组</td></tr> <tr class="child_row_3"><td>小白</td><td>男</td><td>湖北武汉</td></tr> <tr class="child_row_3"><td>小黑</td><td>女</td><td>湖南长沙</td></tr> </tbody> </table> </body>