jquery 常用方法

一、jqurey中，$(document).ready()是什么意思？和window.onload的区别？还有其他什么写法或者替代方法？

  • $(document).ready()是指当DOM结构加载完成时执行相应的函数。（不包括图片等网络资源,但引入js和css是会阻塞网页渲染的。）
    *window.onload 是指当所有DOM结构全部加载完成后执行相应的函数。
  • 两种的区别：
    1.执行时间
    window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
    $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
    2.编写个数
    window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 。
    $(document).ready()可以同时编写多个，并且都可以得到执行 。
    例如：
window.onload = function(){ 
   alert("1")
}
window.onload = function(){ 
   alert("2") 
} //只有输入 2
$(document).ready(function(){ 
   alert('Hello World') 
})
$(document).ready(function(){ 
   alert("Hello again") 
}) // 输出 Hello World 、Hello again

3.其他写法
window.onload没有其他写法。
$(document).ready()其他写法：$().ready()、$(function(){})。

二、$node.html()和$node.text()的区别？

  • $node.html()主要用于获取元素节点的内容，包括html标签
  • $node.text()用于获取元素的文本内容，不包括html标签
<body>
<div>
  你好
  <h1>11</h1>
</div>
<script>
  var $div1=$('div').html()
  var $div2=$('div').text()
  console.log($div1) //   你好  <h1>11</h1>
  console.log($div2) // 你好 11
// 当div只有文本时，获取结果一样。
</script>
</body>

三、$.extend的作用和用法？

  • jQuery.extend( target ,[ object1 ] ,[ objectN ] )
    作用：当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。

如果附加对象中的属性在目标对象中没有，那么在目标对象中添加该属性。如果附件对象中的属性在目标对象中也有，那么目标对象中属性的值被该属性的值所覆盖。

参数意义：
1.target ：一个对象，如果附加的对象被传递给这个方法那么它将接收新的属性。
2.object1： 一个对象，它包含额外的属性合并到第一个参数。
3.objectN：包含额外的属性合并到第一个参数。

  • jQuery.extend( [deep ], target, object1 [, objectN ] )
    deep：如果是true，合并成为递归（又叫做深拷贝）。

这个用法多了一个参数，它会用递归的方式去合并对象，并且是深拷贝。与上面的用法不同处在于如果目标对象的某个属性在附加对象中有，那么这个属性的值会发生合并，而不是覆盖。

  • jQuery.extend( {}, target, object1 [, objectN ] )
    这个用法较第一个多了一个参数，它与上面的用法不同之处在于不修改目标对象。
    例如：
<body>
   <div id="test"></div>
   <div class="log"></div>
   <script>
           var object1={
               apple:1,
               banana:{weight:23,price:100},
               orange:23
           };
           var object2={
               banana:{price:300,color:'yellow'},
               pineapple:50
           }
// 合并两个对象，并修改第一个对象。
            $.extend(object1,object2 );
           $('.log').append( JSON.stringify( object1 )) 
// {"apple":1,"banana":{"price":300,"color":"yellow"},"orange":23,"pineapple":50}

// 采用递归方式合并两个对象，并修改第一个对象
           $.extend(true, object1,object2 );
           $('#test').append( JSON.stringify( object1 )) 
//{"apple":1,"banana":{"weight":23,"price":300,"color":"yellow"},"orange":23,"pineapple":50}   
 
//   合并两个对象，不修改第一个对象。(这个方法单独使用。）
           var settings=$.extend( {},object1,object2 );
           $('#test').append( JSON.stringify( object1 )+'<br>');
           $('#test').append( JSON.stringify( object2 )+'<br>');
           $('#test').append( JSON.stringify( settings ));
//  {"apple":1,"banana":{"weight":23,"price":100},"orange":23}
// {"banana":{"price":300,"color":"yellow"},"pineapple":50}
// {"apple":1,"banana":// {"price":300,"color":"yellow"},"orange":23,"pineapple":50}
   </script> 
</body>

四、jQuery的链式调用是什么？

  • jQuery的链式调用就是指对一个jquery对象连续的使用jQuery方法。
    原理是执行完一个方法后就返回对象本身（return this），然后使用本对象的其他jQuery方法。
    例如：$("#Test").addClass('style').find("div").eq(0).fadeOut(200);
    上面的例子意为：先为id为Test的对象添加"style"这个样式，再找寻其下的第一个div标签，并使其淡出。通过上面看出链式操作就是围绕一个jQuery对象进行的。

五、jQuery ajax中缓存是怎样控制？

  • jQuery.ajax() 有一个参数为cache。
  • 当使用GET方法发送数据时，将cache设置为true（默认为true，dataType为"script"和"jsonp"时默认为false），表示缓存页面，如果cache设置为false，表示不缓存页面，即每当发起ajax请求时，都会向后台请求数据。
  • 当使用POST方法时，则每次都会被认为是新的请求，不会缓存页面。

六、jquery中data 函数的作用？

jquery中data 函数的作用:在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。.data()方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。

  • 用法1：
    在匹配元素上存储任意相关数据。
.data( key, value )
key，类型: String，一个字符串，用户存储数据的名称。
value，数据值，它可以是任意的Javascript数据类型，除了undefined。
.data( obj )
obj，类型: Object，一个用于更新数据的 键/值对。
  • 方法2：
    返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data( key )
 key，类型: String，存储的数据名；如果那个元素上没有设置任何值，那么将返回undefined。

实例：

<head>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div>
    The values stored were
    <span></span>
    and
    <span></span>
  </div>
<script>
$("div").data("test", { first: 16, last: "pizza!" });
console.log($("div").data("test")); // Object {first: 16, last: "pizza!"}
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
</script> 
</body>  // The values stored were 16 and pizza!

七、用jquery方法实现一些功能

1.给元素$node添加class active，给元素$node 删除class active

$node.addClass('active')
$node.removeClass('active')

2.展示元素$node,隐藏元素$node

$node.show()
$node.hide()

3.获取元素$node的属性:id、src、title,修改以上属性

//获取元素属性
$node.attr('id')
$node.attr('src')
$node.attr('title')
// 修改元素属性
$node.attr('id','photo')
$node.attr('src','guaiguai.jpg')
$node.attr('title','dog home')
//一次设置多个属性
$node.attr({
    id:'photo',
    src:'guaiguai.jpg',
    title:'dog home'
})

4.给$node添加自定义属性data-src
$node.attr('data-src','dog')
5.在$ct内部最开头添加元素$node

$ct.prepend('<p>Test</p>')
$ct.before('<p>Test</p>')

6.在$ct内部最末尾添加元素$node

$ct.append('<p>Test</p>')
$ct.after('<p>Test</p>')

7.删除$node
$node.remove() //删除被选元素（及其子元素）
8.把$ct里的内容清空
$ct.empty() //从DOM中移除集合中匹配元素的所有子节点。(包括内容)
9.在$ct里设置html<div class="btn"></div>
$ct.html('<div class="btn"></div>')
10.获取、设置$node的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

$node.width() //不包括内边距宽度,仅包括内容
$node.height() //不包括内边距高度,仅包括内容
$node.width(500).height(500); //设置元素的宽高

$node.innerWidth() //包括内容和内边距宽度
$node.innerHeight() //包括内容和内边距高度

$node.outerWidth() //包括内容、内边距、边框宽度
$node.outerHeight() // 包括内容、内边距、边框高度

$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度

//.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 。
//当元素有 box-sizing: border-box时候使用.css('width')而非.width()。

11.获取窗口滚动条垂直滚动距离
$(window).scrollTop()
12.获取$node到根节点水平、垂直偏移距离

$node.offset().left  //水平偏移距离
$node.offset().top  //垂直偏移距离

13.修改$node的样式，字体颜色设置红色，字体大小设置14px
$node.css({"color":"red","font-size":"14px"})
14.遍历节点，把每个节点里面的文本内容重复一遍

$( 'li' ).each(function( index ) {
  console.log( $(this).text() )
})

15.从$ct里查找 class为 .item的子元素
$ct.find('.item')
16.获取$ct 里面的所有孩子
$('.ct').children()
17.对于$node，向上找到class为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel')
18.获取选择元素的数量
$node.length
19 获取当前元素在兄弟中的排行
$node.index()

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,602评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,442评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,878评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,306评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,330评论 5赞 373
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,071评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,382评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,006评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,512评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,732评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,283评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2赞 345

推荐阅读更多精彩内容