java jquery入门_Jquery的入门(一)

Jquery介绍

Jquery是一个快速,简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或者是JavaScirpt框架),Jquery设计的宗旨是:write less,Do More 即倡导写更少的代码,做更多的事情.

它封装饿了JavaScirpt常用的功能代码,提供了一种渐变的javascript设计模式,优化HTML文档操作,事件处理,动画设计和AJAX交互,Jquery实现了跨越浏览器,开发者不需要关注浏览器的兼容性了,但是从2.0开始,不再兼容IE6.7.8

Jquery的基本使用方式

页面中引入Jquery文件

首先调用jQuery中的核心函数,函数的名就是jquery,在此函数的参数中传递匿名函数,这个匿名函数将在页面加载完成后执行,同时函数名jquery可以简写为$.

同时$也是jquery中的选择器,可以查找页面中的标签元素.

jQuery(function(){

alert("jquery!");

});

$(function(){

alert("jquery!!");

})

DOM对象转成JQuery对象

Dom对象和jquery对象相互是不通用的,也就是说document.gtxxx()获取到的元素,属于DOM对象,只能调用Dom对象中提供的方法和属性.而使用$("xx")获取到的元素属于JQuery对象,只能调用Jquery对象的方法.

var name= document.getElementById("name");//dom对象属性

alert(name.value);//jQuery对象函数

var $name = $("#name");

alert($name.val());

}

将DOM对象转成jquery对象,使用$包裹即可.

var $jquery = $(dom对象)；

jquery对象转成DOM对象

jquery对象的本质是数组,而数组中的每个元素是DOM对象,将jquery对象转成DOM对象,使用数组的素银,取出数组中的元素即可.

var dom = $jquery[0];

jquery选择器

jquery的选择器与css的选择器的作用是完全一样的,目的是精确快速的定位到某个html元素上并获取该元素对象,进而使用jquery的方法对该html进行操作.

jquery常用的选择器有如下几个:基本选择器,基本过滤选择器.属性选择器,表单属性选择器.层级选择器等.

基本选择器

标签选择器(元素选择器):$("html标签名")

id选择器;$("#id的属性值")

类选择器:$(".class的属性值")

//

id="b1"/>//id选择器找到id值为b1的按钮,绑定点击事件

$("#b1").click(function(){//id选择器为one的标签,jquery的css方法设置样式

$("#one").css("background-color","#FF0000");

});//

//id选择器b2的按钮,绑定点击事件

$("#b2").click(function(){//获取所有div标签,使用标签选择器

$("div").css("background-color","#FF0000");

});//

$("#b3").click(function(){//class选择器,选择class为mini

$(".mini").css("background-color","#FF0000");

});//

$("#b4").click(function(){//获取标签span,和id值是two的元素//多选择器逗号分割$("span,#two").css("background-color","#FF0000");

});

层级选择器

获得A元素内部的所有的B元素：$("A B ") --- 后代选择器

获得A元素下面的所有B子元素：$("A > B")

获得A元素同级下一个B元素：$("A + B")

获得A元素同级所有后面B元素：$("A ~ B")

红色" id="b1"/>

$("#b1").click(function(){//选择所有body的后代div标签,层级选择器

$("body div").css("background-color","#FF0000");

})//

$("#b2").click(function(){//选择body的子标签div

$("body>div").css("background-color","#FF0000");

});//

$("#b3").click(function(){//id为one的下一个div

$("#one+div").css("background-color","#FF0000");

});//

$("#b4").click(function(){//id为two后的所有兄弟div

$("#two~div").css("background-color","#FF0000");

});//

$("#b5").click(function(){//siblings方法,选择所有的同级标签//$("#two").siblings().css("background-color","#FF0000");//siblings方法继续选择

$("#two").siblings("div").css("background-

color","#FF0000");

});

属性选择器

获得有属性名的元素：$("A[属性名]")

获得属性名 等于 值 元素：$("A[属性名=值]")

复合属性选择器，多个属性同时过滤：$("A[属性名!=值][属性名!=值][属性名!=值]")

//

$("#b1").click(function(){//属性选择器,选择带有title

$("div[title]").css("background-color","#FF0000");

});//

$("#b2").click(function(){//获取属性值是test的元素

$("div[title='test']").css("background-

color","#FF0000");

});//

$("#b3").click(function(){//有id属性，并且title属性值是test

$("div[id][title='tees']").css("background-

color","#FF0000");

});

基本过滤选择器

不包括指定内容的元素例如： :not(selecter)

偶数，从 0 开始计数： :even

奇数，从 0 开始技术： :odd

指定第几个： :eq(index)

大于n个： :gt(index)

小于n个： :lt(index)

获得标题 (

/

.... ) :header --- 固定写法

获得动画的 :animated ---固定写法 正在执行的动画

//

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

$("div:not(.one)").css("background-color","#FF0000");

});//

id="b2"/>$("#b2").click(function(){

$("div:even").css("background-color","#FF0000");

});//

id="b3"/>$("#b3").click(function(){

$("div:odd").css("background-color","#FF0000");

});//

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

$("div:gt(3)").css("background-color","#FF0000");

});//

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

$("div:eq(3)").css("background-color","#FF0000");

});//

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

$("div:lt(3)").css("background-color","#FF0000");

});//

id="b7"/>$("#b7").click(function(){

$(":header").css("background-color","#FF0000");

});//

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

$(":animated").css("background-color","#FF0000");

});

function moveFn(){//div向上滑动, slideUp方法,slideToggle方法

$("#mover").slideToggle("slow",function(){

moveFn();

});

}

moveFn();

表单属性选择器

可用： :enabled

不可用： :disabled

选中(单选radio ，多选checkbox)： :checked

选择(下列列表 )： :selected

$("#b1").click(function(){//获取多个input标签属性值是 enabled, type属性值是text 返回数组

var $inputs = $("input[type='text']:enabled");for(var i=0;i

alert($($inputs[i]).val());

}

});//

$("#b2").click(function(){//获取多个input标签属性值是disabled,返回数组

var $inputs = $("input[type='text']:disabled");for(var i=0;i

alert($($inputs[i]).val());

}

});//

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

var $inputs= $("input[type='checkbox']:checked");

alert($inputs.length);

});//

/** html()==DOM对象的innerHTML

* text()==DOM对象的innerText*/$("#b4").click(function(){

var $inputs= $("option:selected");for(var i=0;i

alert($($inputs[i]).text());

}

});

jQuery的DOM方法操作

文本/值操作：html(),text(),val()

html() === innerHTML

text() === innerText

val() === value

html text val 传递参数代表赋值 空参代表获取

//页面加载完成

$(function(){//获取张三

alert($("#myinput").val());//获取标题文本

alert($("#mydiv").text());//获取mydiv的后的所有内容

alert($("#mydiv").html());

});

属性操作：attr(),prop()

attr() === setAttribute和getAttribute

attr(属性名称); --- 获取属性的值

attr(属性名称,属性值) --- 设置的属性的值

//获取北京节点的name属性值

alert($("#bj").attr("name"));//设置北京节点的name属性的值为dabeijing

$("#bj").attr("name","dabeijing");//新增北京节点的discription属性 属性值是didu

$("#bj").attr("discription","didu");//删除北京节点的name属性并检验name属性是否存在

$("#bj").removeAttr("name");//获得hobby的的选中状态

alert($("#hobby").prop("checked"));/** JQuery1.6版本后的方法prop

* checked,selected使用prop 单属性

* 其他属性使用attr*/

css操作：addClass(),removeClass(),css()

addClass(值) === attr(“class”,值)

removeClass(class值) === removeAttr(“class值”)

css() ==== js对象.style.属性

css(css属性名) 获取css属性名称对应值

css(css属性名,值) 设置css样式

//

id="b1"/>$("#b1").click(function(){

$("#one").attr("class","second");

});//

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

$("#one").addClass("second");

});

//

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

$("#one").removeClass();

});

//

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

//toggleClass切换样式方法,如果没有样式,设置样式second,如果存在

second样式,则还原

$("#one").toggleClass("second");

});

//

id="b5"/>

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

alert($("#one").css("background-color"));

});

//

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

$("#one").css("background-color","#00FF00");

});

元素创建/内部插入

$( "

" )创建标签li

append() 追加子节点

prepend() 追加子节点，在最前

remove() 移除节点

empty() 清空所有子节点

/**将反恐放置到city的后面*/$("#city").append($("#fk"));/**将反恐放置到city的最前面*/$("#city").prepend($("#fk"));//删除

北京

$("#bj").remove();//删除所有的子节点  清空元素中的所有后代节点(不包含属性节点).

$("#city").empty();//测试(id='city')并没有被删除

jquery的效果

元素的显示与隐藏

show(speed ,fn) 显示参数 speed，显示速度，单位：毫秒。固定字符串：slow, normal, or

fast参数 fn，显示成功之后回调函数。

hide() 隐藏

toggle() 切换

元素的滑动显示与隐藏

slideDown() 显示，高度变大。

slideUp() 隐藏，高度变小。

slideToggle() 切换

元素的淡入淡出的显示与隐藏

fadeIn() 显示

fadeOut() 隐藏

fadeToggle() 切换

表格隔行变色案例

$("tr:gt(1):even").css("background-color","#CC66FF");

$("tr:gt(1):odd").css("background-color","#CC6600");

});

全选和全不选案例

$("input[class='itemSelect']").prop("checked",$(obj).prop("checked"));

}

定时广告案例

setTimeout(function(){//$("#adDiv").css("display","block");

$("#adDiv").slideDown(3000);

},3000);

setTimeout(function(){//$("#adDiv").css("display","none");

$("#adDiv").slideUp(3000);

},8000);

});