您的位置：首页 > Web前端 > JQuery

jQuery常用的方法

2016-03-22 00:00 501 查看

[code=plain]jQuery 是一个 JavaScript 库。以下方法是在jquery对象上使用，不论是不是方法连用
$("div").children("p").css({"color":"red","border":"2px solid red"})
都不能抛弃这个初衷

使用 Google 的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
使用 Microsoft 的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

[code=plain]jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

[code=plain]所有 jQuery 函数位于一个 document ready 函数中，为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");
});
});
</script>

[code=plain]jQuery 选择器语法 http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp $(this) 隐藏当前的 HTML 元素
$("#test") id="test" 的元素
$("p") 所有 <p> 元素
$(".test") 所有 class="test" 的元素

$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("ul li:first")   每个 <ul> 的第一个 <li> 元素
$("div#intro .head")   id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("div,p) 所有的div 和p 的元素

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

[code=plain]常用事件 http://www.w3school.com.cn/jquery/jquery_ref_events.asp 
$("#test").hide() 隐藏
$("div1").show()
$("#div1").css("display", "block");
$("#div1").attr("style", "display:block;");

$(selector).click(function(e){})   点击
$(selector).dblclick(function) 双击
$(selector).focus(function)    元素焦点

select()   select 事件
submit()   submit 事件
change()    change 事件
error()        error 事件
mousedown()
mouseenter()   mouse enter 事件
mouseleave()   mouse leave 事件
mousemove()    mouse move 事件
mouseout() mouse out 事件
mouseover()    mouse over 事件
mouseup()  mouse up 事件
event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
event.preventDefault() 取消默认行为，例，点击提交时阻止对表单的提交，
不被ie支持，ie用window.event.returnValue=false;
event.timeStamp    事件发生时时间戳
load() 触发、或将函数绑定到指定元素的 load 事件
one()  向匹配元素添加事件处理器。每个元素只能触发一次该处理器。

[code=plain]
常用html操作方法  很多方法在设置值时可用函数return值，函数的参数意义可参照 http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp $("p").css("background-color")返回
$("p").css("background-color","red"); css （把所有 p 元素的背景颜色更改为红色）
$("#test").attr("href")          返回属性的值
$("#test").attr({"href" : "http://。。。。","title" : "。。。"});设置多属性的值
$("#test").attr("href",function(index,oldValue){return oldValue + "/jquery";});函数获取
$("#div1").width(500).height(500); 设置宽高
$("li").length  获取长度
removeAttr()   从所有匹配的元素中移除指定的属性。
addClass() 向匹配的元素添加指定的类名。
hasClass() 是否拥有指定的类。
removeClass()  从所有匹配的元素中删除全部或者指定的类。
$.trim()清除包括换行符、空格、制表符等常见的两端空白字符。

删除元素/内容
empty()    删除匹配的元素集合中所有的子节点。
remove()移除所有匹配的元素。删除 class="italic" 的所有 <p> 元素：$("p").remove(".italic");

添加新的 HTML 内容
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

获得内容 - text()、html() 以及 val()
<p id="test1" >这是段落中的<b>粗体</b>文本。</p>
<p>姓名：<input type="text" id="test2" value="米老鼠"></p>
$("#test1").text() - 返回文本内容  （这是段落中的粗体文本。）
$("#test1").html() - 返回所选元素的内容（包括 HTML 标记）（这是段落中的<b>粗体</b>文本。）
$("#test2").val() - 返回表单字段的值
设置内容 - text()、html() 以及 val()
$("#test1").text("Hello world!");
$("#test1").html("<b>Hello world!</b>");
$("#test2").val("Dolly Duck");
$("#test1").text(function(index,oldValue){return oldValue + "/jquery";});

jQuery.param()  创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
$("#Form").serialize() 将表单内容序列化为字符串。
$("#Form")..serializeArray()   序列化表单元素，返回 JSON 数据结构数据。
$("p").get(0) 获得第一个 p 元素的名称和值
获得第一个 p 元素的名称和值：
$("p").index());

$("li").size() 输出被 jQuery 选择器匹配的元素的数量

将 li 元素转换为数组，然后输出该数组元素的 innerHTML
$("button").click(function(){
x=$("li").toArray()
for (i=0;i<x.length;i++)
{
alert(x[i].innerHTML);
}
});

[code=plain]遍历方法 （不带参数时返回指定元素的方法所获取的所有元素） http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp 遍历父元素
$("span").parent("p").css({"color":"red","border":"2px solid red"})
返回直接父元素中是元素p的
$("span").parents("ul").css({"color":"red","border":"2px solid red"})
返回祖先元素中是元素ul的
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"})
返回介于给定祖先元素div和备选元素span元素之间的所有祖先元素(不包括div)
遍历子元素（find必须带参数）
$("div").children("p").css({"color":"red","border":"2px solid red"})
返回直接子元素是元素p的
$("div").find("p").css({"color":"red","border":"2px solid red"})
返回被选元素的所有后代p元素
$("div").find("*").css({"color":"red","border":"2px solid red"});
返回被选元素的所有后代元素
遍历同袍元素
$("h2").siblings("p").css({"color":"red","border":"2px solid red"})
返回被选元素的所有同胞元素p
$("h2").next("p").css({"color":"red","border":"2px solid red"});
返回被选元素的下一个同胞元素是p的
$("h2").nextAll("h3").css({"color":"red","border":"2px solid red"});
返回被选元素的所有跟随的同胞元素是h3的
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
返回介于给定参数h6和被选元素h2之间的（不包括h6）所有跟随的同胞元素
$("h2").prev("p").css({"color":"red","border":"2px solid red"});
返回被选元素的上一个同胞元素是p的
$("h2").prevAll("h3").css({"color":"red","border":"2px solid red"});
返回被选元素的所有前面的同胞元素是h3的
$("h2").prevUntil("h6").css({"color":"red","border":"2px solid red"});
返回介于给定参数h6和被选元素h2之间的（不包括h6）所有前面的同胞元素
其他遍历
$('li.item-a').closest('ul').css('background-color', 'red');
返回被选元素的第一个祖先元素，返回向上的离类是item-a的li元素最近的ul元素
$("li").each(function(){alert($(this).text())
为每个匹配元素规定运行的函数。
.end()返回到上一个选择器对象
$('#modifyDialogContent').find('#cateid').val(1).end().find('#catename').val('商品')
找到模态框modifyDialogContent的cateid赋值为1，返回（.end()）到
modifyDialogContent选择器对象 找到catename赋值为商品

[code=plain]过滤 http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp $("div p").first().css("background-color","yellow");返回被选元素的首个元素
$("div p").last().css("background-color","yellow");返回被选元素的最后一个元素
$("p").eq(1).css("background-color","yellow");
返回被选元素中带有指定索引号的元素（必须写索引号）
$("p").filter(".intro").css("background-color","yellow");过滤出class="intro"的p元素
$("p").not(".intro").css("background-color","yellow");过滤出class！="intro"的p元素

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航