码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript - Jquery - 常用方法

时间:2017-06-05 14:49:29      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:第一个   gre   pen   创建   nbsp   ogg   back   str   ext   

常用方法(Common Method)

类名

方法

addClass(className)

className是css类名,为该对象指定或增加一个类名,返回该对象。

removeClass(className)

className是css类名,移除参数指定的类名,返回该对象。

hasClass(className)

className是css类名,测试该对象是否含有参数指定的类名。

toggleClass(className)

className是css类名,该对象的类名在原来的类名与参数指定的类名之间切换,一般用在事件里。

//事件每触发一次,span的类名就会在spanColor和spanRelColor之间切换
var JQueryObj = $(input);
var span = $(.spanColor);
JQueryObj.click(function () {
    span.toggleClass(spanRelColor)
})

.spanColor {color:Red;}
.spanRelColor {color:Green;}

<span class=spanColor>hello</span>
<input type="button" value=click/>

表单

方法

val(x)

x是可选的值,获取或设置该对象的值,此方法用于获取或设置输入框、下拉列表、单选多选框的值。

距离

属性

pageY

鼠标对象的属性 获取鼠标离客户区顶部的高度。

pageX

鼠标对象的属性 获取鼠标离客户区左边的长度。

方法

offset

返回一个对象,包含了left和top属性,分别表示该对象离客户区的左边距和顶边距

$(div).offset( ).left

height

获取对象的高度。

innerHeight

获取对象的高度+补白。

outerHeight(x)

获取对象的高度+补白+边框。默认x=false,x=true时,获取对象的高度+补白+边框+边距。

scrollTop(x)

x是可选的表示距离的值,设置或获取出现滚动条的JQuery对象其滚动条从该对象顶部开始位置滚动了多少距离。

scrollLeft(x)

x是可选的表示距离的值,设置或获取出现滚动条的JQuery对象其滚动条从该对象左部开始位置滚动了多少距离。

position

返回一个对象,该对象包含了left和top属性,分别表示该对象离其父元素的左边距和顶边距。

样式

方法

css (x)

x是匿名对象,指定了css属性名与值的键值对,设置或获取该对象的css样式。

height(x)

设置或获取该对象的高度,获取的值不包括padding和border。x可以是高度值或匿名函数,匿名函数内部会自动生成两个参数index(该DOM对象在JQuery数组对象中的索引)和height。

width(x)

设置或获取该对象的宽度,获取的值不包括padding和border。x可以是高度值或匿名函数,匿名函数内部会自动生成两个参数index(该DOM对象在JQuery数组对象中的索引)和width。

innerHeight

获取该对象的内部高度,即不包括border的值,但包括padding的值。

innerWidth

获取该对象的内部宽度,即不包括border的值 但包括padding的值。

outerHeight(x)

获取第一个匹配元素的外部高度,包括border、padding。x是可选的布尔值,如果为true,获取会包括margin。

outerWidth(x)

获取第一个匹配元素的外部宽度,包括border、padding。x是可选的布尔值,如果为true,获取会包括margin。

节点

创建节点

$(htmlCode)

htmlCode是节点的html代码,节点必须小写,创建一个节点并将其包装为JQuery对象返回。

$(document).ready(function () {
    var html = "<div>hello</div>";//创建元素节点和文本节点
    html += "<p/>";//单闭合节点可以写成<p/>或<p></p>
    var div = $(html);
    $(document.body).append(div)//插入body里
var div = $("<div id=‘box‘ style=‘width:200px;background:red‘>hello</div>")   
})

方法

获取

parent

获取该对象的父节点。

parents(x)

x是选择器,获取该对象的由x指定的祖先节点。

$("div").parents(".box")

attr(x,y)

x是属性名,y是可选的属性值,获取或设置该对象的属性值。

//使用匿名对象来同时设置多个属性 
var JQueryObj = $(‘span‘);
JQueryObj.attr ( { ‘title‘ : ‘spanBox‘ , ‘class‘ : ‘spanBox‘ } );

children (x ,y)

x是可选的子元素html标签名,y是可选的JQuery选择器。获取该对象全部的子节点或只获取参数指定的节点,返回一个JQuery对象。

var tr = $("#tr");
tr.children("td:eq(1)") //获取该tr的索引为1的td节点

next

获取紧靠该对象的下一个兄弟节点。

nextAll (x)

x是选择器,获取该对象后边的所有兄弟节点或x指定的节点。

$("#box").nextAll("a[id=10]")//选择ID为box的节点,然后选择它的兄弟节点,该兄弟节点的id=10

nextUntil(x)

x是选择器,获取该对象后边的每一个兄弟节点,直到遇到选择器给出的节点时停止(不包括选择器给出的节点)。

<body>    
    <div id="box"></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="4"></div>
    <script>
      $(document).ready(function () {
         var len = $("#box").nextUntil("div[id=4]").length;
         alert(len);//print 3
      })
   </script>
</body>

prev

获取紧靠该对象的上一个兄弟节点。

prevAll(x)

x是选择器,获取该对象前边的所有兄弟节点或x指定的节点。

prevUntil(x)

x是选择器,获取该对象前边的每一个兄弟节点,直到遇到选择器给出的节点时停止(不包括选择器给出的节点)。

siblings(x)

x是选择器,获取该对象前后的所有兄弟节点。

插入

append(x)

在该对象所包含的后代节点的最后一个位置后插入x指定的节点。 x=html代码片段,x=纯文本,x=JQuery对象。

prepend(x)

将x指定的节点插入该对象所包含的后代节点的首位。x=html代码片段,x=纯文本,x=JQuery对象。

before(x)

在该对象之前插入x指定的节点。x=html代码片段,x=纯文本,x=JQuery对象。

after(x)

在该对象之后插入x指定的节点。x=html代码片段,x=纯文本,x=JQuery对象。

appendTo(x)

将该对象插入x节点所包含的末位。x=html代码片段,x=纯文本,x=JQuery对象。

<script>
    $(document).ready(function () {
        var div = $("<div style=‘background:red;width:100px;height:40px;‘></div>");
        var p = $("<p>test</p>");
        p.appendTo(div);
        div.appendTo(document.body);
    })
</script>

prependTo(x)

将该对象插入x节点所包含的首位。x=html代码片段,x=纯文本,x=JQuery对象。

insertBefore(x)

将该对象插入x节点之前。x=html代码片段,x=纯文本,x=JQuery对象。

insertAfter(x)

将该对象插入x节点之后。x=html代码片段,x=纯文本,x=JQuery对象。

wrap(x)

将该对象分别用参数指定的节点包裹。x=html代码片段,x=纯文本,x=JQuery对象。

var JQueryObj = $(‘span‘);
JQueryObj.wrap(‘<b></b>‘);
<span>hello</span>
<span>hello</span>
<!--得到结果如下:-->
<b><span>hello</span></b>
<b><span>hello</span></b>

wrapAll(x)

将该对象用参数指定的节点包裹。x=html代码片段,x=纯文本,x=JQuery对象。 

var JQueryObj = $(‘span‘);
JQueryObj.wrapAll(‘<b></b>‘);
<span>hello</span>
<span>hello</span>
<!--得到结果如下:-->
<b>
<span>hello</span>
<span>hello</span>
</b>

wrapInner(x)

将该对象所包含的文本用x指定的节点包裹起来。x=html代码片段,x=纯文本,x=JQuery对象。 

var JQueryObj = $(‘span‘);
JQueryObj.wrapInner("$(‘<b></b>‘)");
<span>hello</span>
<span>hello</span>
<!--结果如下:-->
<span><b>hello</b></span>
<span><b>hello</b></span>

text(x)

x是文本,获取该元素所包含的文本(包括后代节点的文本),如果提供了x,则用x替换该对象所包含的所有内容(包括html标签) 并返回一个JQuery对象。

html(x)

x是html代码,获取该元素包含的所有后代的html)代码和文本(不包括自身)。如果提供了x,则用x替换该对象所包含的所有内容(包括html标签) 并返回一个JQuery对象。

查找

index(x)

x是选择器,在该对象里查找x过滤出的节点的索引。

var index = $(".tabMenuLinkBox li").index($("#firstLi"));

删除

remove

删除该对象,包括其后代节点并返回删除的JQuery对象。

//获取类名为fatherBox的节点,从中过滤出索引为奇数的span节点
var deleteJQueryObj = $(‘.fatherBox span:odd‘);
//删除
deleteJQueryObj.remove();

empty

删除该对象的所有后代节点(不包括自身)并返回删除的JQuery对象。

removeAttr(x)

x是属性节点,删除该对象的属性节点并返回删除的JQuery对象。

替换

replaceWith(x)

将该对象替换为参数指定的节点,x=html代码片段,x=纯文本,x=JQuery对象。

replaceAll(x)

将参数指定的节点替换为该对象,x=html代码片段,x=纯文本,x=JQuery对象。

复制

clone(x)

克隆该对象,x是可选的布尔值,如果x=true,会额外克隆该对象已注册的事件。

迭代

each(x)

x是函数,在函数里迭代该对象。

$(document).ready(function () {
    var childNodes = $(document.body).children();
    childNodes.each(function () {
        ADS.log.write(this.nodeName);
    });
});

 

Javascript - Jquery - 常用方法

标签:第一个   gre   pen   创建   nbsp   ogg   back   str   ext   

原文地址:http://www.cnblogs.com/myrocknroll/p/6942700.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!