JQuery入门基础

1.JQ简介

1）优势：

1.轻量级

2.强大的选择器：css1.0~css 3.0、XPATH

3.出色的DOM操作的封装

4.可靠的事件处理机制

5.完善的Ajax

6.不污染顶级变量：JQ只会建立建立一个JQuery对象，其所有的函数和方法都在这个对象之中。

7.出色的浏览器兼容

8.链式操作方式

9.文档与插件完善

10.开源

2.JQ语法

1）$符号

$符号与 jQuery是等价的，$.ajax与jQuery.ajax是等价的

2）window.onload(){}与$(document).ready(function(){})的对比

3）各种选择器

3.1基本选择器

3.2 层次选择器

注：1.可以使用  $(".one").next("div")替代$(".one+div")

       2.可以使用 $(".one").nextAll()替代$(".one~div")//之后的所有同辈div

       3.$(".one").siblings("div")//所有同辈的div,无论前后位置

3.3 基本过滤选择器

3.4内容选择器：过滤规则主要体现在它所包含的元素或者内容上

3.4可见性过滤选择器

3.5属性过滤选择器

4）DOM操作

---------------------------------------------------------------------------操作结点---------------------------------------------------------------------

4.1 查找结点

查找元素结点：使用选择器

查找属性结点：利用选择器查找出元素结点之后，可以使用attr来获得属性

 <span style="white-space:pre"></span>var $t1 = $("form div:eq(1) p");//找到表单中索引为1的div中的P标签 <span style="white-space:pre"></span>alert($t1.attr("title"))//输出标题

4.2 创建结点

使用工厂函数$(html)来创建结点，根据传入的html标签字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象

<span style="white-space:pre"></span>$li_1 = $("<li></li>");        $li_2 = $("<li></li>");        $("ul").append($li_1)               .append($li_2);

创建其他结点，如属性结点或者文本节点都可以直接在创建结点的时候直接在标签中添加

插入结点的几种方法：

4.2 删除结点

$(html).remove();删除该节点之后，该节点的所有后代结点（包括其绑定的事件）也一并删除，返回一个指向该节点的引用，因此可以在以后继续使用该节点，例如：把该结点添加到指定位置，

4.3 复制结点

$("ul li").click(function(){          $(this).clone().appendTo("ul")//复制当前结点，并将其添加到<ul>元素中        })

注：clone(boolean)，其中boolean为true或者false，表示是否同时复制原来标签的绑定事件，如点击操作等

4.4 替换结点

$("p").replaceWith("<strong>把整个p标签逗比换成这个strong标签</strong>")

或者颠倒一下顺序

$("<strong>把整个p标签逗比换成这个strong标签</strong>").replaceAll("p")

4.5 包裹标签

使用wrap()将所有匹配的标签分别用一组组的参数包裹起来

$("strong").wrap("<br></br>")//用br标签吧strong标签包起来

使用wrapAll()将所有匹配的标签用一组参数统一包裹起来

$("strong").wrapAll("<br></br>")//用br标签吧strong标签包起来

---------------------------------------------------------------------------操作属性---------------------------------------------------------------------

4.6 获取和设置属性

使用标签.attr(属性)

<span style="font-size:18px;">  var p_title = $("p").attr("title")//获取p元素的title属性值</span>

使用$().attr(属性)为元素设置属性

<span style="font-size:18px;">$("p").attr("title","新标题")</span>

<span style="font-size:18px;">$("p").attr("title"："新标题"，"name":"test")</span>

4.7 删除属性

使用$().remove("属性名"),如$("p").remove("title")

---------------------------------------------------------------------------操作样式---------------------------------------------------------------------

4.8 获取和设置样式

对于<p class="myClass" titile="测试">这是一段用来测试的内容</p>

因为class也是<p>标签的属性，所以可以使用$().attr()来设置样式和获取样式,同上此处略

注：追加样式可以在原来基础上添加一个样式，使用addClass()。

步骤1：在CSS文件内添加一个样式如.high{background-color:red}

步骤2：在网页中使用&("p").addClass("high");//如果后添加的样式中有与之前的样式重叠的部分，则会发生覆盖

4.9 切换样式

使用toggle()来控制行为上的重复切换，交替执行代码3与代码4：如果原来元素是隐藏的，就显示他；否则就显示

<span style="white-space:pre"></span>  $("toggleBtn").toggle(function(){            //显示元素 代码3          },function(){            //隐藏元素 代码4          }))

同样也可以使用toggle()来控制样式上的重复切换，如果存在则删除它，否则就添加

$("p").toggleClass("another");如果这个标签之前没有anther类的话，第一次点击添加another类样式，第二次点击删除another样式

4.10 判断是否拥有样式

$("p").hasClass("another");//返回值为true或false

---------------------------------------------------------------------------操作HTML---------------------------------------------------------------------

4.11 html()方法

用来读取或者设置某个元素的html内容

对于     <p class="myClass" titile="测试">   <strong>这是一段用来测试的内容</strong>   </p>

$("p").html();显示 <strong>这是一段用来测试的内容</strong>

4.12 text()方法

用来读取或者设置某个元素的文本内容

对于     <p class="myClass" titile="测试">   <strong>这是一段用来测试的内容</strong>   </p>

$("p").text();显示 这是一段用来测试的内容

4.13 val()方法

I 类似于JavaScript中的value，用来设置或获取元素的值，返回值可能为一个数组

<span style="white-space:pre"></span>    $("btn").focus(function(){              var txt = $(this).val();              alert(txt);            })

val(this.defaultValue)用来获得或设置元素的默认值

II 使radio等单选或复选框进行的某一项被选中

<span style="font-size:18px;"><select id="single"><option>选项A</option><span style="white-space:pre"></span><option>选项B</option><span style="white-space:pre"></span><option>选项C</option></select></span>

$("#single").val("选项B");//使选项B哪一个选项卡选中

$("#double").val(["A","B"]);//使复选菜单中选项卡A和选项卡B选中

---------------------------------------------------------------------------遍历结点---------------------------------------------------------------------

1$(this).children()方法：获取匹配元素的子集元素

2.$(this).next()方法：获取匹配元素后面紧邻的同辈元素

3.$(this).prev()方法：获取匹配元素前面紧邻的同辈元素

4.$(this).siblings()犯法：获取匹配元素前后所有的同辈元素

---------------------------------------------------------------------------CSS-DOM---------------------------------------------------------------------

4.14 设置和获取

使用$(this).css("color");来获取color属性

使用$(this).css("color","red");来设置red属性；$(this).css("color":"red","width":"100px");同时设置多个属性

设置半透明:$(this).css("opacity","0.5")

5 ）JQuery中的事件与动画

5.1 加载DOM之load()方法

<span style="font-size:18px;">$(window).load(function(){  //编写代码})</span>

如果处理函数绑定给window对象，则会在所有内容（图像、窗口等）加载完毕后触发；如果处理函数绑定给元素，则会在元素的内容加载完毕后触发

5.2 事件绑定之bind()方法

bind( 事件类型，可选参数，处理函数)，例如给元素绑定点击标签实现隐藏域显示状态之间的切换

<script>      $(function(){        $("#panel h5.head").bind("click",function(){//当然，使用$("#panel h5.head").click(function(){   是简写的方式;同时可以再函数里设置参数click,function(arg1,arg2)          var $content = $(this).next();//获取内容元素          if($content.is(":visible")){            $content.hide();          }else{            $content.show()          }        })      })    </script>  </head>  <body>    <div id="panel">      <h5 class="head" >什么是Jquery?</h5>      <div class="content">        dsdfasdfsadfasdfasf      </div>    </div>  </body>

可以使用bind()函数同时绑定多个事件,如bind("mouseover mouseout",function(){}),但是此时更好的方式是使用JQuery支持的链式结构

<span style="font-size:18px;">$("div").bind("mouseover",function(){<span style="white-space:pre"></span>}).bind("mouseout",function(){<span style="white-space:pre"></span>})</span>

5.3 合成事件值hover()方法

1.hover(enter,leave)用于模拟鼠标悬浮事件，当鼠标移动到元素上时，触发第一个函数，当光标移出这个元素时，触发第二个事件

案例：模拟元素随鼠标的隐藏与显式

 $(function(){       // $("#panel h5.head").bind("click",function(){        $("#panel h5.head").hover(function(){          $(this).next().hide();        },function(){          $(this).next().show();        });      });

5.4 合成事件值toggle()方法

toggle(fn1,fn2...fnN):用于模拟鼠标连续单击事件，第一次点击触发一个事件，第二次点击触发第二个函数。。。。随后的每次调用都重复对这几个函数的循环调用1212

案例：点击元素，切换隐藏或出现状态

$(function(){       // $("#panel h5.head").bind("click",function(){        $("#panel h5.head").toggle(function(){          $(this).next().hide();        },function(){          $(this).next().show();        });      });

5.4 事件冒泡

内部元素触发的事件会冒泡，逐层触发祖先元素的相同事件，对于如下的DOM操作

<body>    <div id="content">        外层DIV元素        <span>内层span元素</span>    </div>    <div id="msg"></div>  </body>

如果对span div body分别绑定click事件，那么单击内层的span元素，则会分别触发三个元素的click函数，所以有必要对事件的作用范围进行控制。停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。
使用stopPropagation()方法来停止事件冒泡

$(function(){          $("span").bind("click",function(event){              var txt = $("#msg").html()+"<p>内层span元素被单击</p>"              $("#msg").html(txt);              event.stopPropagation();//改成return false则表示同时组织默认行为          })       })

使用preventDefault()方法来阻止元素的默认行为：如超链接的跳转，单击“提交”按钮后表单的提交，阻止表单的提交等等

<script>      $(function(){          $("#sub").bind("click",function(event){             var username = $("#username").val();             if(username == ""){              $("#msg").html("<p>文本框的值不能为空</p>");              event.preventDefault();//验证失败后，阻止表单的提交，页面不刷新；改成return false则同时取消冒泡事件             }          })       })    </script>  </head>  <body>    <form >      用户名:<input type="text" id="username">      <input type="submit"  value="提交" id="sub"/>    </form>    <div id="msg"></div>  </body>

JQuery不支持事件捕获

5.5 移除事件

ubind(事件类型，处理函数);//如果事件类型为空，则删除所有事件，否则只移除指定事件

$(html).one("click",function{})//为元素绑定只执行一次的事件

$("#btn").bind("click",myFun1=function(){          })          $("#delFunc").click(function(){                      })

5.6 动画

1.原则

2.show()和hide():长宽高按照比例逐渐缩小至左上角无限小

$().show()等价于$().css("display","blokc/inline");------$().hide()等价于$().css("display","none");

可以为show()/hide()函数添加参数来控制速度，如$("element").show("slow/normal/fast/1000")

3.fadeIn()和fadeOut():改变元素的透明度，直至元素消失

4.slideUp()和lideDown():只改变元素的高度，从上到下伸展显示，或者从下到上缩短隐藏

5.自定义动画

animate(pamars,speed,callback)

为了能够使用left、right、top、down来操作这个元素，首先需要把元素的position属性设置为relative或者absolute这样才可以动起来

  $(this).animate({"left":"500px"},3000);//目标元素向右移动500px,再次点击不会再移动

  $(this).animate({left:"+=50px"},3000);//目标元素在当前位置上向右移动500px，每点一次，移动一次

  $(this).animate({"left":"500px","height":"200px","width":"200px"},3000);//一边移动，一边放到至200pxX200px

如果不想同时执行几个事件，只需要使用链式结构$(this).animate().animate()就可以按顺序执行了

案例1：综合运用

注：css()事件并不会按照顺序执行，如，在.animate().css()中，css样式会被立刻执行，解决办法是在animate({},function(){$(this).css()})，在回调函数离执行

6.停止动画

stop(是否要清空未执行完的事件队列，是否直接将未执行完的动画跳转到末状态)

注1：如果直接使用stop()事件，则会立即停止当前正在进行的动画，如果接下来还有动画未被执行，则以当前状态开始接下来的动画。例如，给一个元素绑定hover()事件，当鼠标移入移出速度比较快时，会出现动画与行为不相符的情况，这是，可以再第一个函数的回调函数中添加stop()（由原来的$(this).animate->$(this).stop().animate）

注2：如果鼠标移入事件的回调函数里有多个动画，即移入后有多个操作响应，此时需要使用stop(true)来清除排队的事件队列，这样才会在鼠标移出时显示效果

7.延迟动画

animate().delay(1000)

6 ）操作表单和表格

6.1 单行输入框：焦点变换后的样式变换

 $(function(){         $("input").focus(function(){          $(this).addClass("focus");       }).blur(function(){          $(this).removeClass("focus")       })     })

注：对于某个元素的动画效果，例如对于多行输入标签

$comment.height($comment.height() + 50 );//高度增加50,这样的变化比较呆板，可以使用动画替代

改为：

$comment.animate({height :"+=50"}.400)//0.4s内高度增加50，注意在动画过程中，判断评论框是否处于动画中，如果处于动画中，则不追加其他动画，以免造成动画队列不必要的累积

改为:

 $('.bigger').click(function(){      if(!$comment.is(":animated")){        if($comment.height()<500){          $comment.animate({height:"+=50"}.400)        }      }     })<pre name="code" class="javascript">if("#checkRev").click(function(){      $('[name=items]:checkbox').each(function(){        this.checked=!this.checked;      })    })

6.2 复选框:使用元素的checked属性

对于<input type="checkbox" name="items" value="足球">足球

。。。

<input type="button" name="CheckAll" value="全选">

。。。

全选功能

 if("#checkAll").click(function(){     <span style="color:#990000;"> $('[name=items]:checkbox')</span>.attr('checked':true)//注意此处选取全部name为items的checkbox    })

反选功能：

if("#checkRev").click(function(){      $('[name=items]:checkbox').each(function(){        this.checked=!this.checked;//此处时用的是JavaScript原生的DOM操作      })    })

使用$(this).val()获取每一项的值

6.3 下拉菜单

获取选中项：var $selects = $('#select1 option:selected')

删除该项：$selects.remove()

追加到其他下拉菜单：$selects.appendTo('#select2')

6.4 表单验证

<label for="username">用户名：</label><input type="text" id="username" calss="required"/>

1.为必填项添加红色*后缀

$(form:input.required).each(function(){

var $required = $("<strong class="high">*</strong>");//创建元素

$(this).parent().append($required);//将他追加到文档中

})

2.验证表单

$('form:input').blur(function(){var $parent = $(this).parent();$parent.find("sss").remove();//删除以前的提醒元素if($(this).is('#username')){if(this.value==""||this.value.length<6){var errMsg = "不得少于六位数";$parent.append('<span class="sss">'+errMsg+'</span>')}}})

3.表单应用

4.表格的伸缩

使用如下代码

$(function(){

$('tr.parent').click(function(){

$(this)

.toggleClass('selected');//添加删除高亮

.siblings('child_'+this.id).toggle();//隐藏显示所谓的子行

}).cllick();//默认进入页面的时候，触发事件，隐藏子行

})

5.选项卡

6.结合Cookie添加换肤功能

1)使用插件

<script src="js/jquery.cookie.js" type="text/javascript"></script>

2)

7）JQuery与Ajax

1.初步接触

1.建立一个空对象来装入XMLHttpRequest对象：

var XMLReq = null;

2.给XMLHttpRequest对象赋值

if(window.ActiveXObject){        xmlHttpReq = new ActiveXObject(Microsoft.XMLHTTP);      }else if(window.XMLHttpRequest){        xmlHttpReq = new XMLHttpRequest()      }

3.实例化成功之后，进行初始化

xmlHttpReq.open("GET","test.php",true);//异步调用

4.回调事件处理器：当xmlHttpReq对象的readyState值改变时调用

xmlHttpReq.onreadystatechange = RequestCallBack;

处理函数

 function RequestCallBack(){//一旦readystate的只发生改变，就会调用此函数        if(xmlHttpReq.readystate == 4){          if(xmlHttpReq.status == 200 ){            document.getElementById("resTest").innerHTML == xmlHttpReq.responseTest;          }        }      }

5.发送请求

xmlHttpReq.send(null);//因为是Get请求，所以可以使用Null参数

2.各种方法

1）load()载入远程HTML代码到DOM中

load(url,发送到服务器的key/value数据,callback)

如果没有参数使用GET方法发送，否则使用POST方法发送

("#resText").load("test.html");//把test.html中的内容加载到id位resText的元素内

("#resText").load("test.html .papa");//把test.html中class=papa的内容加载到id位resText的元素内

("#resTest").load("test.php",{username:"feng",age:"22"},function(){

//---

})

2）$.post()方法和$().get()方法

load()方法从WEB服务器获取静态方法，使用这两个方法向服务器发送一些参数，也可以使用$.ajax()

$get(url,发送到服务器的key/value数据,callback)

案例1：提交表单

$("#send").click(function(){        $.get("test.php",{          username:$("#username").val(),          content:%("#content").val()        },callback);//callback有两种参数,fucntion callback(data,textStatus);内容(html、json等)和状态（success,error等）      })

举一个返回值设置为json的回调函数的例子

8）JQuery综合

1.

2.

3.

4.导航栏特效

<div class="box"><ul class="menu"><li class="level1"><a href="#none">衬衫</a><ul class="level2"><li><a href="#none">短袖衬衫</a></li><li><a href="#none">长袖衬衫</a></li><li><a href="#none">短袖T恤</a></li><li><a href="#none">长袖T恤</a></li></ul></li><li class="level1"></li><li class="level1"></li></ul></div>

$(document).ready(function(){$(".level1 > a").click(function(){$(this).addClass("current")<span style="white-space:pre"></span>//给当前元素添加"current"样式</span>.next().show()<span style="white-space:pre"></span>//下一个元素显示</span>.parent().siblings().children("a").removeClass("current")<span style="white-space:pre"></span>//父元素的同级元素的子元素中<a>标签移除"current"样式<span style="white-space:pre"></span>.next().hide();<span style="white-space:pre"></span>//他们的下一个元素隐藏return false;});});

2）