Javascript - Jquery - 常用方法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript - Jquery - 常用方法相关的知识，希望对你有一定的参考价值。

常用方法（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 - 常用方法的主要内容，如果未能解决你的问题，请参考以下文章

Webpack 中的第 3 方 Javascript 和 CSS 文件。奇怪的行为

Javascript - Jquery - 常用方法

Javascript/jQuery常用方法

JQuery基本知识汇总；JQuery常用方法；浅入了解JQuery

jquery和javascript的区别(转载自脚本之家)

jQuery常用API