JQ常用方法

2016-07-10  本文已影响253人  羞涩的涩

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

$(document).ready()是指在页面中等到所有DOM准备就绪时,执行ready()这个函数,一般把jq事件和函数放置于该事件中。

区别:

其他写法:


$node.html()$node.text()的区别


$.extend 的作用和用法?

  1. 当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(第一个参数)并返回,如果没有{}将赋值到第一个对象。
    用法为:
    var object=$.extend({},object1,object2);

  2. 当一个参数为true时,将会进行递归的深拷贝合并。
    用法为:
    var object=$.extend(true,{},object1,object2);


JQuery 的链式调用是什么?

指的是在JQ环境下,函数的返回对象可以连续的使用.jq()的方法进行连续调用而不报错


JQuery ajax 中缓存怎样控制?

使用cache这个参数控制,true代表可以缓存,false则为不缓存?(不缓存的方法主要是运用是时间戳的原理)


jquery 中 data 函数的作用

data函数主要是用来在元素中存放临时数据
如:

$("div").data("loading",'hahha');
  console.log($("div").data("loading"));  //"hahha"

代码

  1. 给元素 $node 添加 class active,给元素 $noed 删除 class active
    $node.addClass('active) //添加
    $node.removeClass('active') //删除

  2. 展示元素$node, 隐藏元素$node
    $node.show() //展示
    $node.hide() //隐藏

  3. 获取元素$node 的 属性: id、src、title, 修改以上属性
    $node.attr('id/src/title','el') //只有第一个参数代表获取元素属性,第二个可选参数el为需要设置的属性

  4. 给$node 添加自定义属性data-src
    $node.attr('data-src','添加的属性')

  5. 在$ct 内部最开头添加元素$node
    $ct.prepend($node)

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

  7. 删除$node
    $node.remove() //删除此元素以及子元素

  8. 把$ct里内容清空
    $ct.empty() //删除ct子元素

  9. 在$ct 里设置 html <div class="btn"></div>
    $ct.html('<div class="btn"></div>')

  10. 获取、设置$node的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

    获取高度:
    $node.height()        返回高度(不包括内边距、边框或外边距)
    $node.inndrHeight()    返回高度包括内边距
    $node.outerHeight()     返回高度包括内边距和边框
    $node.outerHeight()    返回高度包括内边距边框和外边距
    //宽度等同于上边
    设置宽高例子:
    `$('div').width(300).height(200);  设置div宽度300,高度200`
    
  11. 获取窗口滚动条垂直滚动距离
    $(document).scrollTop();

  12. 获取$node 到根节点水平、垂直偏移距离
    $node.offset()

  13. 修改$node 的样式,字体颜色设置红色,字体大小设置14px

    $node.css({
        "color":"red",
        "font-size":"14px"    
    }; 
    
  14. 遍历节点,把每个节点里面的文本内容重复一遍

    $.each($node,function(){
      console.log($(this).text());
    });
    或:
    $node.each(function(){
      console.log($(this).text());
    });
    
  15. 从$ct 里查找 class 为 .item的子元素
    $ct.find('item')

  16. 获取$ct 里面的所有孩子
    $ct.children() //获取直接子元素
    $ct.find('*') //获取所有后代元素

  17. 对于$node,向上找到class为'.ct'的父亲,在从该父亲找到'.panel'的孩子
    $node.parents('.ct').find('.panel')

  18. 获取选择元素的数量
    $node.length; //$node.size()

  19. 获取当前元素在兄弟中的排行
    $node.index()


代码

代码2、3


上一篇 下一篇

猜你喜欢

热点阅读