Jquery基础整理1

     1.简单的JQuery

(1)  $(document).ready(function(){               $(document).ready(mydays);

        alert(“加载完毕，请检查！”);               function mydays(){

});                                           alert(“加载完毕，请检查！”)   };

//注册事件的函数，和普通的Dom不一样，不需要再元素上面标记onload这样的事件。

(2)当页面Dom元素加载完毕时执行代码，可以简写为：$(function(){ alert(“加载完成”) });

(3)和onload类似，但是onload只能注册一次（window.onload=function….）(没有C#中的“+=“机制)，后注册的取代先注册的，而ready可以多次注册都会被执行。

(4)JQuery的ready和Dom的onload的区别：

  onload是所有Dom元素创建完毕，图片，CSS等加载完毕后才能被触发。ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度。

1. JQuery提供的函数

(1) $.map(array,fn) 对数组array中每个元素调用fn函数将逐个进行处理，fn函数将处理返回，最后得到一个新数组。

例如：得到一个数组值是原数组值二倍的新数组

var arr[3,4,7,8];

var arr2=$.map(arr,function(item){  return item*2  });

$.map不能处理Dictionary风格的数组。

(2) $.each(array,fn) 对数组array中每个元素调用fn函数进行处理，没有返回值。

  var arr={“tom”:10,”jerry”:20,”lily”:30};

  $.each(arr,function(key,value){alert(key+”=”+value);});

  如果是普通风格的数组，则key的值是序列号。

(3) 还可以省略function参数，这时候用this可以得到遍历的当前元素。

   var arr=[3,6,7];

   $.each(arr,function(){ alert(this);   });

1. JQuery对象，Dom对象

(1) JQuery对象就是通过JQuery包装Dom对象后产生的对象：alert($(“#div1”).html());。Dom对象要想通过JQuery进行操作，先要转换为JQuery对象。

(2) $(“#div1”).html()等价于document.getElementById(“div1”).innerHTML;

(3) $(“#div1”)得到的就是JQuery对象，JQuery对象只能调用JQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用JQuery对象的方法，所以这句话是错误的（alert($(“#div1”).innerHTML)），因为innerHTML是Dom对象的属性。

(4) Array是JS语言本身的对象，不是Dom对象，因此不需要转换为JQuery对象才能用。

(5) 将Dom对象转换为JQuery对象的方法，$(Dom对象)；当调用JQuery没有封转的方法时必须用Dom对象。转换方法：var domobj=jqobj[0]或者var domobj=jqobj.get(0)。

(6) JQuery修改样式：$(“#div1”).css(“background”,”red”);  获得样式

$(“#div1”).css(“background”);  修改value=$(“#un”).val(“abc”)。获得value;

$(“#un”).val(),类似的获得，设置innerText，innerHTML用text()和html()。

1. JQuery选择器

(1) JQuery选择器用于查找满足条件的元素，比如可以用$(“#控件ID”)来根据控件ID获得控件的JQuery对象，相当于getElementById;

$(“#div1”).html(“<font color=red>Hello</font>”);

(2) $(“TagName”)来获取所有指定标签名的JQuery对象，相当于getElementByName;

 $(function(){

        $(“#btnclick”).click(function(){

               $(“p”).html(“我们都是p”);              

});      

  });                                

隐式迭代，给所有选择出来的元素增加Click事件

(3) css选择器，同时选择拥有样式的多个元素。

<style type=”text/css”>

        .test{background-color:red; }

</style>

<script type=”text/javascript”>

        $(function(){

               $(“.text”).click(function(){

       alert($(this).text());

});        });

</script>

<p class=”test”>Test1</p>

(4) 多条件选择器

        1) 多条件选择器：$(“p,div,span.menuitem”)，同时选择p标签，div标签和拥有menuitem样式的.span标签元素。

        2) 注意：选择器表达式中的空格不能多，不能少，这是易错点。

        3) 层次选择器：

       $(“div li”)获取div下的所有li元素（后代，子，子的子）。

        $(“div>li”)获取div下的直接li子元素。

        $(“.menuitem+div”)获取样式名为menuitem之后的第一个div元素。

        $(“.menuitem~div”)获取样式名为menuitem之后的所有div元素。

1. JQuery隐式迭代

如何判断对象是否存在，JQuery选择器返回的是一个对象数组，调用text(),html(),click()之类的方法的时候其实是对数组中的每个元素迭代调用每个方法，因此即使通过ID选择的元素不存在也不会报错，如果需要判断是否存在，因该这样写：if($(“btn1”).length<=0){

     alert(“ID”为btn1的元素不存在,请您检查！);

}

1. JQuery节点遍历

(1) next()方法用于获取节点后的第一个挨着的同辈元素 $(“.menuitem”).next(“div”);

  nextAll()方法用于获取节点后的所有同辈元素   $(“.menuitem”).nextAll(“div”);

(2) siblings()方法用于获取所有的同辈元素。  $(“.menuitem”).siblings(“li”);

1. JQuery基本过滤选择器

(1) :first 选取第一个元素。$(“div :first”);  选取第一个<div>

(2) :last 选取最后一个元素。  $(“div :last”)  选取最后一个<div>

(3) :not（选择器）选取不满足”选择器条件的元素”   $(“input :not(.myclass)”);   选取样式名不是myclass的<input>。

(4) :even，:odd  选取索引是奇数，偶数的元素。$(input:even)选取索引是奇数的<input>

(5) :eq(索引序号)，:gt(索引序号)，:lt( 索引序号)选取索引等于，大于，小于索引序号的元素，比如 $(“input:lt(5)”)  选取索引小于5的<input>。

(6) $(“:header”)选取所有的h1…..h6的元素。

(7) $(“div:animated”); 选取正在执行动画的<div>元素

(8) 属性过滤选择器

        $(“div[id]”)选取有ID属性的<div>

        $(“div[title=test]”)选取title属性为”test”的<div>,JQuery中没有对GetElementByName进行封装，用$(“input[name=abc]”);

        $(“div[title!=test]”)选取title属性不为”test”的<div>

        还可以选择开关，结束，包含等，条件还可以复合。

(9) 表单对象选择器

        $(“#form1:enabled”);   选取id为form1的表单内所有启用的元素。

        $(“#from1:disabled”);   选取id为form1的表单内所有禁用的元素。

        $(“#form1:checked”);   选取所有选中的元素(Radio,CheckBox)。

        $(“selectLselected”);    选取所有选中的选项元素(下拉列表)。

1. 元素的each

JQuery元素也可以调用each方法，只是对$.each的简化调用。举例：显示选中的复选框

1. JQuery表单选择器

(1) $(“:input”);  选取所有的<input>，<textarea>，<select>和<button>元素，和$(“input”)不一样，$(“input”)只能获得<input>控件。

(2) $(“:text”);  选取所有的单行文本框，等价于$(“input:[type=text]”);

(3) $(“:password”)选取所有的密码框，同理还有：:radio，:checkbox，:submit，:image，:reset，:button，:file，:hidden。

1. JQuery的Dom操作

(1) 使用html()方法读取或者设置元素的innerHTML;

        alert($(“a:first”).html());              alert($(“a:first”).html(“Hello”));

(2) 使用text()方法读取或者设置元素的innerText.

        alert($(“a:first”).text());               alert($(“a:first”).text(Hello));

(3) 使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性用attr进行操作。     alert($(“a:first”).attr(“href”));

        $(“a:first”).attr(“href”,”http://www.baidu.com”);

(4) 使用removeAttr删除属性

1. 动态创建Dom节点

(1) 使用$(html字符串)来创建Dom节点，并且返回一个JQuery对象，然后调用append等方法将新创建的节点添加到Dom中。

        var link=$(“<a href=’http://www.baidu.com’>百度</a>”);

        $(“div:first”).append(link);

$()创建的就是一个JQuery对象，可以完全进行操作。

        var link=$(“<a href=’http://www.baidu.com’>百度</a>”);

        link.text(“百度”);

        $(“div:first”).append(link);

append()方法用来在元素的末尾追加元素。

prepend()在元素的开始添加元素。

after() 在元素之后添加元素。

before()在元素之前添加元素。

1. 删除节点

(1) remove()删除选择的节点

$(“ul li.textitem”).remove();  删除ul下的li中有testitem样式的元素。

remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点，比如重新添加到其他其他节点下：

       var list=$(“#ulsite li”).remove();

       $(“#ulsite2”).append(list);

(2) empty()是将节点清空

1. 节点操作

(1) 替换节点

        $(“br”).replaceWith(“<hr />”);  注解：<br />替换为<hr />

(2) 包裹节点

warp()方法用来将所有元素逐个用指定标签包裹。

$(“b”).warp(“<font color=’red’></font>”)将所有的粗体红色显示

1. JQuery样式操作

(1) 获取样式 attr(“class”)。

(2) 设置样式 attr(“class”,”myclass”)。

(3) 追加样式 addClass(“myclass”)。

(4) 移除样式  removeClass(“myclass”)。

(5) 切换样式(如果存在样式则去掉样式，如果没有样式则添加样式)  taggleClass(“myclass”)。

(6) 判断是否存在样式  :hasClass(“myclass”);