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);
    });
});
时间: 2024-07-28 22:24:27

Javascript - Jquery - 常用方法的相关文章

Javascript/jQuery常用方法

1 //字符串转成时间 2 function getDate(strDate) { 3 var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/, 4 function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')'); 5 return date; 6 } 后续待补充 原文地址:https://www.cnblogs.com/chengrady/p/926241

jquery 常用方法 集锦

JQuery常用方法 1.获取元素 $("标签名").$("#id").$(".类名").$("标签名,#id,.class") $("祖先 子孙").$("父>子").$("前+后").$("兄~弟")指定层次关系 $("p[id]")获取有id的p.$("p[id^=p]")获取有id且,id设定值

JavaScript jQuery 入门回顾 2

JQuery 滑动 利用jQuery可以在元素上创建滑动效果. slideDown() 向下滑动元素. slideUp() 向上滑动元素. slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换. $(selector).slide(speed,callback);{ 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 可选的 callback 参数是滑动完成后所执行的函数名称.}

一篇 jQuery 常用方法及函数的文章留存备忘。

jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName("") $("#ID") //取单个控件document.getElementById("") $("div #ID") //取某个控件中 控件 $("#ID #ID") // 通过控件ID取其中的控件 $("标签.class样式名") /

JQUERY 常用方法大全

JQUERY 常用方法大全 Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $(&quo

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

一.jQuery对象与JavaScript对象 ①JavaScript入口函数比jQuery入口函数执行的晚一些: JQuery的入口函数会等页面加载完成才执行,但是不会等待图片的加载: JavaScript入口函数需要等待页面加载和图片加载完成才执行: JavaScript入口函数:window.onload = function(){}: JQuery入口函数:①$(document).ready(function(){});    ②$(function(){}); ②JQuery对象与D

javascript & jQuery

//获取表格行数和列数 //表格行数 var rows = document.getElementById("example_table").rows.length; //表格列数 var cells = document.getElementById("example_table").rows.item(0).cells.length; javascript & jQuery

javascript --- jQuery --- Deferred对象

javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应词典:v.迁延:听从:扣存:[军]使延期入伍所以deferred对象的含义就是"延迟"到未来某个点再执行. jQuery的官方文档给出了用jQuery.ajax()发送请求的基本方式http://api.jquery.com/jQuery.ajax/Example: Save some d

动态加载页面数据的小工具 javascript + jQuery (持续更新)

使用该控件,可以根据url,参数,加载html记录模板(包含json参数对应,以及具体记录位置Index根据参数描述加载对应的属性,并可以根据简单的判断分支加载对应html或者控件)至列表容器内(JQuery选择器字符串)注: 该控件在使用前需引入JQuery框架支持,使用该控件,可极大的减少Ajax列表数据动态加载开发工作的实际工作量. 使用方式: 首先,添加控件引用,并加入Jquery支持 <script src="js/jquery.js"></script&g