jquery 常用方法

作者: 疯小儿 | 来源:发表于2017-11-22 22:05 被阅读0次

一、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()

jquery 常用方法

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

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

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

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

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

六、jquery中data 函数的作用？

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读