jquery

一，jQuery简介

jQuery的特点：

·尺寸很小，用起来很方便，使用的是链式编程，隐式迭代

·屏蔽了浏览器的兼容问题

·插件丰富，开源，免费

jQuery并没有代替js，所以该用js的地方就要用js，因为jQuery中好多的方法没有封装，只能用js调用

二，ready与onload的区别

·$(document).ready(function(){ ...});

·onload = function(){.....}

区别：

1，ready可以加载多个，但是onload只能是一个，因为onload = 一个函数，用的是等于，后面再这样写onload = 一个函数，后面的这个函数就会覆盖前面的那个函数，所以onload只能加载一次，但是ready可以写多个，$(document).ready(function(){ ...});  $(document).ready(function(){ ...}); 都会加载

2，ready只要等到dom对象全部加载完了，就开始加载，但是onload要等dom对象，css,图片等全部加载完了才能加载，所以ready更加有助于提高网页的响应速度

$(function(){...})是$(document).ready(function(){...});的简写，如果很多个ready,那么这样写会很麻烦，所以就有简写的$(function(){...}),功能是完全一样的；

在jQuery中可以用$(window).load()来实现onload()

三，jQuery中的几个内置的函数(主要是针对array对象的)

1，**$.map(arr , fn); 该函数是对arr进行操作，并返回一个新的数组对象，但是不适用与Dictionary风格的数组

var arr = [1,2,3,4];

var arr2 = $.map(arr,function(item){//这里不一定是item,可以随便写

return item*2;

});

alert(arr2);//返回一个新的数组

2，**·$.each(arr,function(key, value)) ，没有返回值，可以对json可以对array操作

var json = {id:'1',name:'hwt'}; / / 来循环json

$.each(json,function(key,value){

alert(key+":"+value);

});

·$.each(arr, function(){...} )，没有参数就是值的是得到value的值

var arr = [1,2,3,4];  //来循环普通数组

$.each(arr,function(){

alert(this); //注意用的是this 而不是$(this)

});

·$.each(arr , function(item)(){....}) 只有一个参数，就是key的值

var arr = [1,2,3,4,5];

$.each(arr, function(item){

alert(item);

});

·对与json数组，要用两个循环，第一个循环循环下标，来读每一个json

var jsons = [{id:'1',name:'hwt'},{id:'2',name:'xixi'}];

$.each(jsons,function(){   // 循环数组的下标

$.each(this,function(key,value){ //循环json里面的属性

alert(key+"-"+value);

});

});

---------------------

var jsons = [{id:'1',name:'hwt'},{id:'2',name:'xixi'}];

 $.each(jsons,function(){

alert(this.name);

});

四，dom对象与jQuery对象转换

1，jQuery对象就是通过jQuery包装Dom对象后产生的对象，jQuery对象只能调用jQuery封装的方法

2，$("#div1").html();等同于 document.getElementById("div1").innerHTML(); $("#div1")就是得到jQuery对象；

当调用jQuery没有封装的方法时，就必须要转换为dom对象；

var dom = jq[0];

var domm = jq.get(0);

五，选择器(chooser.jsp)

id选择器：$("#idName")   ==>  documentElementById("idName");

class选择器：$(".className") 

标签选择器：$("tagName") ==> documentElementsByTagName("tagName");

多条件选择器：

$("p, div , span.className") / $("p, div , span#idName")  : 同时选择p , div , span的className的所有标签 / idname（用逗号分开）

$("div li") : 取出div中的所有li,不管是直接或者间接

$("div>li"): 取出div下的直接li元素

节点遍历：

$("#div1").next();下一个同辈元素

                     .nextAll()是获取节点之后的所有同辈元素 

                     .siblings(["li"]) ：获取所有的同辈元素

============

$(function(){

var div = $("#menu>div"); //jQuery对象

div.addClass("divstyle");

div.click(function(){

$(this).siblings().css("background-color","");//得到兄弟姐妹

$(this).css("background-color","blue");

});

});

=============

过滤选择器：（filterChoose.jsp）

·$("div : first") 选取第一个div

·$("div : last ") 选取最后一个div

·:gt(n) 大于 :lt(n)小于  :eq(n) 等于

$("#tb1 tr:gt(0):lt(3)")  // 选取大于0 然后重新从0排，小于3 的，既 大于0 小于 4 ，而不是说0到3，而是去掉了第一个之后，然后又从0开始

        ·:even 选取偶数行：从0开始

·:odd 选取奇数行：从0开始

***相对选取

在有些时候如果以根元素为基准来找元素的话，那么就很麻烦

所以用相当的选取

$("td",$(this)) //第二个传过来的参数是以第二个参数为基准来，找$(this)下面的元素

======

$(function(){

$("div ul").click(function(){

$("li",$(this)).css("background-color","red");//以第二个参数为基准来选取元素

});

});

属性过滤选择器：

$("div[title = titleName]") --- 

$("div[name = Name]")

$("div[id = idName]")

$("div[title != titleName]") -- title不等于titleName的div

$("div[value = values]")

$("input[type=text]")

表单过滤器：

$("#form1:enable") 选取id为#form1的表单中的所有可以用的元素

$("#form1:disable") 选取id为#form1 的表单中所有禁用的元素

$("input:checked") 选取被选择的元素（radio,checkbox）

$("select option:selected"); 在selected中要得到选中了的option的时候，要注意

六，表单选择器

$(":input")  能够取得所有的input, textarea , select, button

$("input")  只能取得 input 的元素，像textarea等元素就取不到

取得所有的文本框：$(":text") 同理可得：$(":select") , $(":button") , $(":radio"), $(":submit")

取<input type="text" >，textarea的值 是 $("#id").val();

取得div,span,textarea,<a></a>,<li></li> 的值 是 $("#id").text(); 

***********************************************************

*****对于 radio 的取值是 val();

$("#setValue2").click(function(){

var str = $(":checkbox[name=interest]").val(["篮球","玩电脑"]);

});

******对于radio的设值：.val(["男"]); 就算是对radio设值，虽然只有一个，但是也必须是这样的格式.val(["男"]);

$("#setValue").click(function(){

$("input[name=sex]").val(['男']); 

});

===============================================

*****checkbox 的取值是 

$("#getValue2").click(function(){

var arr = new Array();

$(":checkbox[name=interest]:checked").each(function(key,value){//取值

arr[key] = $(value).val(); // 每一个checkbox的值

});

alert(arr.join(","));

});

*****checkbox的设值：

$("#setValue2").click(function(){

var str = $(":checkbox[name=interest]").val(["篮球","玩电脑"]);

});