jquery基础

sdfiiiiii

浏览: 16823 次
性别:
来自: 上海

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (18)

社区版块

存档分类

p { margin-bottom: 0.08in; }

JQuery

简单代码：

(一 )Test

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 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 will disappear.</p>

<button type = "button">Click me</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 and XML.

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

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

DOM对象与 Jquery对象的互转：

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

<p><span>It should be Red!</span></p>

<button type="button">Click me</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 对象中第一个元素的对应属性值。

<a href="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("add info");

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

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

下拉列表 select

</select>

</div>

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

</script>

访问 input：

</div>

$("#div3 input").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","solid 1px red");

20.筛选函数

<ul>

</ul>

</div>

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

//alert($("div#div4 li").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("<span style='color:red'>candy</span>");

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

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

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

<p>paragraph</p>

$("p").appendTo("#box");//first is 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">click me!</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] will disappear!(blue style)</span></div>

<p><span>It should be Red!</span></p>

<button type="button">Click me</button>

<a href="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>

分享到：

Eclipse的ExtJs智能提示 | 琐碎零件

2012-12-31 11:51
浏览 941
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery基础

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery基础

评论

发表评论

相关推荐

最近访客更多访客>>