jquery基础

来源：互联网发布：戴立忍知乎编辑：程序博客网时间：2024/06/05 19:27

JQuery

简单代码：

(一)Test

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<title>JQuery Test</title>

<head>

$(document).ready(function(){

$("p").click(function(){

$(this).hide();

});

$("button").click(function(){

$("p").hide();

});

</script>

</head>

<body>

<p>If you click on me, I willdisappear.</p>

<button type = "button">Clickme</button>

</body>

</html>

1. Query 语法实例

通过hide()和show()两个函数，jQuery支持对HTML元素的隐藏和显示：

$(this).hide()$("#hide").click(function(){

$("p").hide("slow");//$("p").hide(1000);

});

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

$("p").show();

});

演示jQuery hide()函数，隐藏当前的HTML元素。

$("#test").hide()

演示jQuery hide()函数，隐藏id="test"的元素。

$("p").hide()

演示jQuery hide()函数，隐藏所有<p>元素。

$(".test").hide()

演示jQuery hide()函数，隐藏所有class="test"的元素。

2. ready 函数

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行jQuery代码。

jQuery 元素选择器

jQuery 使用CSS选择器来选取HTML元素。

$("p") 选取<p>元素。

$("p.intro") 选取所有class="intro" 的 <p>元素。

$("p#demo") 选取id="demo" 的第一个<p> 元素。

jQuery 属性选择器

jQuery 使用XPath表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有href 属性的元素。

$("[href='#']") 选取所有带有href 值等于 "#"的元素。

$("[href!='#']") 选取所有带有href 值不等于 "#"的元素。

$("[href$='.jpg']") 选取所有href 值以 ".jpg"结尾的元素。

5. 改变css样式

$("p").css("background-color","red");

6.jQuery 事件

Event 函数绑定函数至

$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function)触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

7.jQuery 滑动函数- slideDown, slideUp, slideToggle, callback是执行完之后的回调函数

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

8.jQuery Fade 函数- fadeIn(), fadeOut(), fadeTo()

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

9.jQuery 效果

函数描述

$(selector).hide() 隐藏被选元素

$(selector).show() 显示被选元素

$(selector).toggle()切换（在隐藏与显示之间）被选元素

$(selector).slideDown() 向下滑动（显示）被选元素

$(selector).slideUp() 向上滑动（隐藏）被选元素

$(selector).slideToggle()对被选元素切换向上滑动和向下滑动

$(selector).fadeIn() 淡入被选元素

$(selector).fadeOut() 淡出被选元素

$(selector).fadeTo() 把被选元素淡出为给定的不透明度

$(selector).animate() 对被选元素执行自定义动画

10.jQuery HTML 操作

$(selector).html(content)改变被选元素的（内部）HTML，改变元素的内容（值）

$(selector).append(content)向被选元素的（内部）HTML追加内容

$(selector).prepend(content)向被选元素的（内部）HTML“预置”（Prepend）内容

$(selector).after(content) 在被选元素之后添加HTML

$(selector).before(content) 在被选元素之前添加HTML

11.jQuery CSS 操作

CSS 属性描述

$(selector).css(name,value)为匹配元素设置样式属性的值

$(selector).css({properties})为匹配元素设置多个样式属性

$(selector).css(name)获得第一个匹配元素的样式属性值

$(selector).height(value) 设置匹配元素的高度

$(selector).width(value) 设置匹配元素的宽度

函数css(name,value)为所有匹配元素的给定CSS属性设置值：

$(selector).css(name,value)

$("p").css("background-color","red");

函数css({properties})同时为所有匹配元素的一系列CSS属性设置值：

$(selector).css({properties})

$("p").css({"background-color":"red","font-size":"200%"});

函数css(name)返回指定的CSS属性的值：

$(selector).css(name)

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

$("#result").html($(this).css("background-color"));//会变成属性的值eg：rgb(255, 0, 0)

12.AJAX = Asynchronous JavaScript andXML.

AJAX通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新。

13.document.getElementsByTagName("span")[0]将获取页面中第一个span对象

DOM对象与Jquery对象的互转：

<div><span>span[0] willdisappear!(blue style)</span></div>

<p><span>It should beRed!</span></p>

<button type="button">Clickme</button>

$("document").ready(function(){

var span1 =document.getElementsByTagName("span")[1];

var span1 = $(span1);

span1.css("color","red");

var span2 =document.getElementsByTagName("span")[0];

var span2 = $(span2);//DOM to jquery

var span3 = $("span")[0];//jquery to DOM

span3.style.color = "blue";

$("button").click(function(){

span2.hide("slow");

});

</script>

使用如下写法把它转换为DOM对象，再调用DOM属性来定义样式：

var span = $(span)[0]; //把jQuery对象转换为DOM对象

span.style.color = "blue";//调用DOM对象的style属性，设置字体颜色为蓝色

除了使用集合索引值把jQuery对象转换为DOM对象外，还可以使用jQuery的get()获取对象内指定索引的元素：

$("span").get(0);

14.each 函数用于遍历所有的对象集合

var span4 = $("span");

span4.each(function(n){

this.style.fontSize = (n+1)*12 +"px";

//$(this).css("fontsize",(n+1)*12+"px");

});

15.

size()方法能够返回jQuery对象中元素的个数，而length属性与size()方法功能相同。例如，

下面代码使用size()方法和length属性返回值都为2。

alert($("span").size());//返回值为2

alert($("span").length);//返回值为2

</script>

16.操作属性的值，取出属性值，移除，赋值

attr(name)：根据属性名（name参数）获取jQuery对象中第一个元素的对应属性值。

<ahref="RedirectFile.jsp">RedirectFile.jsp</a>

var as = $("a").attr("href");

//alert(as);

attr(key,value)：为jQuery对象定义属性并赋值。

$("a").attr("href","test.jsp");

$("img").attr("width","100");

removeAttr(name)：该方法能够移出jQuery对象内指定属性。

$("img").removeAttr("width");

</script>

17.访问DOM元素包含信息

问元素包含的信息可以使用text()方法获取。例如，在下面示例中获取段落标签中包含的所有内容，

即“段落文本1“。如果p包含了其他元素，则省略不计，因此其中包含的span元素将被忽略。

alert($("p").text());

//alert($("p").text());//p1

//alert($("p").html());//会写成p<span>1</span>

</script>

反过来，也可以为text()传递文本字符串，则将自动为元素添加指定文本字符串，同时会自

动删除该元素包含的已有文本。

$("p").text("addinfo");

，text()和text(val)方法能够读写jQuery对象所有匹配元素的内容，结果是由所有匹

配元素包含的文本内容组合起来的文本

下拉列表select

</select>

</div>

alert($("#div2 select").val());

</script>

访问input：

</div>

$("#div3input").each(function(n){

alert($($("input")[n]).val());

});

</script>

默认选中：

<input type="radio"value="radio1" />单选按钮1

<input type="radio"value="radio2" />单选按钮2

<input type="checkbox"value="check1" />复选框1

<input type="checkbox"value="check2" />复选框2

</select>

$("input").val(["radio2","check2"]);

$("select").val(["1","3"]);

</script>

18. 选择器

jQuery 常用选择器说明

#id 根据ID值匹配特定元素,与CSS中的ID 选择器对应

element 根据给定的元素名匹配所有元素,与CSS中的标签选择器对应

.class 根据给定的类匹配元素,与CSS中的类选择器对应

* 匹配所有元素,与CSS中通配符类似,但更灵活,可以匹配局部所有元素

selector1,selector2,selectorN 将每一个选择器匹配元素合并后一起返回,与CSS 中的选择器分组对应

ancestor descendant 在指定祖先元素下匹配所有的后代元素,与CSS 中的包含选择器对应

parent > child 在给定的父元素下匹配所有的子元素,与CSS 中的子选择器对应

prev + next 匹配所有紧接在prev 元素后的 next元素,与CSS中的相邻选择器对应

prev ~ siblings 匹配prev 元素之后的所有siblings 元素,与CSS 没有对应选择器

[attribute] 匹配包含给定属性的元素,与CSS 中的属性选择器对应

[attribute=value] 匹配给定属性等于特定值的元素,与CSS 中的属性选择器对应

[attribute!=value] 匹配给定的属性不包含某个特定值的元素,与CSS 中的属性选择器对应

[attribute^=value] 匹配给定的属性是以某些值开始的元素,与CSS 中的属性选择器对应

[attribute$=value] 匹配给定的属性是以某些值结尾的元素,与CSS 中的属性选择器对应

[attribute*=value] 匹配给定的属性是以包含某些值的元素,与CSS 中的属性选择器对应

[selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用,与CSS中的属性选择器对应

举例：

</div>

</div>

要选择“段落文本1”包含的对象,则可以使用如下语句之一:

$("#p1"); //ID 选择器

$("#box1 p"); //包含选择器

$("#box1>#p1"); //子选择器

$("p#p1"); //指定标签选择器

$("p[id='p1']"); //匹配属性等于特定属性值

$("[id$='1']"); //匹配属性值结尾的值

$("#box1 [id^='p']"); //包含选择器,配合匹配属性值开始的值

$("[id*='1']"); //匹配属性值包含某个字符串

使用各种选择器所返回的对象为jQuery对象(即集合对象),即使返回的元素仅有一个也属于集合,因此不能直接调用DOM定义的方法。

19.表单专用选择器

jQuery 表单选择器说明

:input 匹配所有input、textarea、select和button表单元素

:text 匹配所有的单行文本框

:password 匹配所有密码框

:radio 匹配所有单选按钮

:checkbox 匹配所有复选框

:submit 匹配所有提交按钮

:image 匹配所有图像域

:reset 匹配所有重置按钮

:button 匹配所有按钮

:file 匹配所有文件域

:hidden 匹配所有不可见元素,或者type为hidden 的元素

:enabled 匹配所有可用元素

:disabled 匹配所有不可用元素

:checked 匹配所有选中的复选框元素

:selected 匹配所有选中的选项元素

eg:

$("input:text").css("border","solid1px red");

20.筛选函数

<ul>

</ul>

</div>

alert($("div#div4 ulli:eq(0)").text());

//alert($("div#div4li").eq(0).text());

</script>

jQuery 筛选函数说明

eq(index) 获取指定索引值位置上的元素，索引值从0 开始算起

hasClass(class)检查当前的元素是否含有某个特定的类，如果有，则返回true

filter(expr)筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围，用逗号分隔多个表达式

filter(fn) 筛选出与指定函数返回值匹配的元素集合

is(expr) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true

map(callback)将一组元素转换成其他数组（不论是否是元素数组）

not(expr) 删除与指定表达式匹配的元素

slice(start,[end]) 选取一个匹配的子集，与原来的slice 方法类似

add(expr) 把与表达式匹配的元素添加到jQuery 对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集

children([expr])取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合

contents()查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

find(expr)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素

next([expr])取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合

nextAll([expr]) 查找当前元素之后的所有元素

parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合

parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）

prev([expr])取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

prevAll([expr])查找当前元素之前所有的同辈元素，可以用表达式过滤

siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选

andSelf()加入先前所选的当前元素中，对于筛选或查找后的元素，要加入先前所选元素时将会很有用

end()回到最近的一个“破坏性”操作之前，即将匹配的元素列表变为前一次的状态

21.文档处理插入内容

append()方法与DOM的appendChild()方法功能类似，都是在元素内部增加子元素或文本。

$("div #div5").append("<spanstyle='color:red'>candy</span>");

prepend()方法与append()方法作用相同，都是把指定内容插入到jQuery对象元素中，但是

prepend()方法能够把插入的内容放置在最前面，而不是放置在最末尾。

—appendTo(content)，它可以把所有匹配的元素追加到另一个指定的元素集合中

<p>paragraph</p>

$("p").appendTo("#box");//firstis box, then paragraph, their places exchanged

</script>

append()、appendTo()、prepend()和prependTo()是相互联系，且操作紧密的四个方法

所谓外部插入，就是把内容插入到指定jQUery对象相邻元素内。与内部插入操作基本类似，

外部插入也包含四种方法。

after(content)：在每个匹配的元素之后插入内容。

before(content)：在每个匹配的元素之前插入内容。

insertAfter(content)：把所有匹配的元素插入到另一个指定的元素或元素集合的后面。

insertBefore(content)：把所有匹配的元素插入到另一个指定的元素或元素集合的前面。

22. 嵌套结构

wrap(html)：把所有匹配的元素分别用指定结构化标签包裹起来。

wrap(element)：把所有匹配的元素分别用指定元素包裹起来。

wrapAll(html)：把所有匹配的元素用一个结构化标签包裹起来。

wrapAll(element)：把所有匹配的元素用一个元素包裹起来。

wrapInner(html)：把每一个匹配的元素的子内容（包括文本节点）使用一个HTML结构包裹起来。

wrapInner(element)：把每一个匹配的元素的子内容（包括文本节点）使用元素包裹起来。

eg:

<ul>

</ul>

$("a").wrap(document.getElementsByTagName("li")[0]);

$("li").wrapAll(document.getElementsByTagName("ul")[0]);

$("li").wrapInner("<span></span>");

得到：

<ul>

</ul>

23. 替换结构

$("span").replaceWith("<div>盒子</div>");

</script>

最后，所得到的效果如下：

replaceAll(selector)方法与replaceWith(content)方法操作正好相反。例如，要实现上面的替

换效果，我们可以使用如下代码：

$("<div>盒子</div>").replaceAll("span");

24. 删除和克隆结构清空内容，复制内容，克隆内容

删除结构也有两种方法：一是使用empty()删除匹配元素包含的所有子节点。例如，在下面示例中将删除

div元素内所有子节点和文本，返回“<div></div><div></div>”两个空标签。

$("div").empty();

</script>

使用remove([expr])方法删除匹配的元素，或者符合表达式的匹配元素。例如，在下面

示例中将删除div元素及其包含的子节点，最后返回的是“<p>段落文本3</p>”。

$("div").remove();

</script>

clone(true)方法不仅能够克隆元素，而且还可以克隆元素所定义的事件。例如，在上面示例

中如果为div元素定义一个onclick属性事件，则使用clone(true)方法将会在克隆元素中也包含

属性事件。

$("div").clone(true).appendTo("p");

</script>

克隆的结果为：

25. CSS样式

获取css样式：alert($("p").css("border"));

定义css样式：css(name,value)方法：$("p").css("background","red");

或者：

$("p").css({

color:"blue",

"fontsize":"

14px",

"backgroundcolor":"

red"

});

大小：

height()：获取第一个匹配元素当前计算的高度值（px）。

width()：获取第一个匹配元素当前计算的宽度值（px）。

height(val)：为每个匹配的元素设置CSS高度属性值。如果没有明确指定单位，默认使用px。

width(val)：为每个匹配的元素设置CSS宽度属性值。如果没有明确指定单位，默认使用px。

26.绑定事件

bind()方法能够为每一个匹配元素的特定事件绑定一个事件处理器函数。

$("div#div6").bind("click",function(){

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

});

</script>

在绑定过程中也可以为事件处理函数绑定多个参数值，参数值以对象的形式进行传递，然

后在处理函数中可以把它作为event.data属性值传递给处理函数。

$("div").bind("click",{who:"zhu"},function(event){

alert(event.data.who);

});

</script>

绑定事件之后，也可以使用unbind([type],[data])方法删除事件绑定，其中第一个参数表示

要删除绑定的事件名，第二个参数表示删除的附带参数。

$("div").bind("click",{who:"zhu"},function(event){

alert(event.data.who);

});

$("div").unbind("click");

</script>

为了简化用户交互操作，jQuery自定义了两个事件：hover(over,out)和toggle(fn,fn)。hover()

能够模仿悬停事件，即鼠标移到特定对象上以及移出该对象的方法。

$("p").hover(

function(){

$(this).css("color","red");

function(){

$(this).css("color","transparent");

}

);

<p id = "p3">clickme!</p>

$("#p3").toggle(

function(){

$(this).css("color","red");

function(){

$(this).css("color","transparent");

}

);

<html>

<title>JQuery Test</title>

<head>

$("document").ready(function(){

var span1 =document.getElementsByTagName("span")[1];

var span1 = $(span1);

span1.css("color","red");

var span2 =document.getElementsByTagName("span")[0];

var span2 = $(span2);//DOM to jquery

var span3 = $("span")[0];//jquery to DOM

span3.style.color = "blue";

$("button").click(function(){

span2.hide("slow");

});

var as = $("a").attr("href");

//alert(as);

$("a").attr("href","test.jsp");

//alert("End");

});

</script>

</head>

<body>

</select>

//alert($("select").text);//exception

//alert($("select").val());//2

</script>

<div><span>span[0] willdisappear!(blue style)</span></div>

<p><span>It should beRed!</span></p>

<button type="button">Clickme</button>

<ahref="RedirectFile.jsp">RedirectFile.jsp</a>

<ul>

<li>aaaaaaaaaaa</li>

<li>bbbbbbbbbbb</li>

<li>ccccccccccc</li>

</ul>

var span4 = $("span");

//alert(span4.size());

span4.each(function(n){

alert(n);

this.style.fontsize = (n+1)*12 +"px";

//$(this).css("fontsize",(n+1)*12+"px");

});

//alert($("#p1").text());//p1

//alert($("#p1").html());//会写成p<span>1</span>

</script>

</body>

</html>