jquery 常用方法

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

  • $(document).ready()是指当DOM结构加载完成时执行相应的函数。(不包括图片等网络资源,但引入jscss是会阻塞网页渲染的。)
    *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标签

你好

11

三、$.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 ] )
    这个用法较第一个多了一个参数,它与上面的用法不同之处在于不修改目标对象。
    例如:

   

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

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

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

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

六、jquery中data 函数的作用?

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

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

实例:


  
  


  
The values stored were and
// 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('

Test

') $ct.before('

Test

')

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

$ct.append('

Test

') $ct.after('

Test

')

7.删除$node
$node.remove() //删除被选元素(及其子元素)
8.把$ct里的内容清空
$ct.empty() //从DOM中移除集合中匹配元素的所有子节点。(包括内容)
9.在$ct里设置html


$ct.html('
')

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 常用方法)