jquery方法

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

  • jquery中$(document).ready()的意思:
    一个页面中DOM元素没有加载完时操作页面是不安全的,例如JS代码中有DOM操作,所以一般把<script>标签放在<body>标签的最下面。
    $(document).ready()的代码在页面中的DOM元素加载完执行,所以不管讲JS代码放在html页面那里,都可以把JS代码放到最后去加载。
    设计$(document).ready()的目的是使$(document).ready()中的代码可以在DOM元素一加载完就执行,二不必等到页面上的元素全部加载完。

  • $(doucment).ready()window.onload的区别:

  1. $(document).ready()是DOM元素一加载完就执行,而不用等页面中的所有元素都加载完。
    window.onload是等到页面上的所有元素都加在完才执行,包括图片等。
  2. window.onload不能编写多个,如果有多个只会执行一个。
    $(document).ready()可以同时编写多个,并且都得到执行。
  3. window.onload没有简化写法,而$(document).ready(function(){})可以简写成$().ready(function(){});或者$(function(){});
  4. window.onload是JS的原生方法。
    $(document).ready(dunctin(){})是jquery中的特有方法。

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

  1. $node.html()获的元素节点的html内容,包括html标签。
    $node.text()获的元素节点的文本信息,不包括html标签。
  2. $node.html()中没有参数时,返回匹配元素集合的第一个匹配元素的html内容。
    $node.text()中没有参数时,返回匹配元素集合中每个元素的合并文本(删除html标签),包括后代。
  3. $node.html()有html字符串参数时,覆盖匹配元素集合中的每个匹配元素。
    $node.text()有文本参数时,覆盖匹配元素集合中的每个匹配元素。

$.extend的作用和用法?

  • jquery.extend()用于将一个或多个对象的内容合并到目标对象:
    $.extend(target [,object1] [,objectN]);
  • 是否深度合并:
    $.extend([deep] ,target [,object1] [,objectN]);
  1. deep可选。Boolean类型,指示是否深度合并对象,默认是false,如果该值为true,且多个对象的某个同名属性也是对象,则该属性对象的属性也进行合并。
  2. 如果$.extend()只有一个参数,则意味着参数target被省略,target就是jquery对象本身。通过这种方式可以为全局对象jquery添加新的函数。
  3. 如果多个对象有同名对象,则后面的覆盖前面的。

jquery的链式调用是什么?

  • jquery对象的方法的返回值仍然是当前对象,可以继续调用该对象的jquery方法,提高代码效率,更优雅。
$node.addClass('selected')
      .sibings().removeClass('selected').hide();

jquery ajax 中的缓存怎样控制?

  • ajax中的缓存是指,当使用ajax提交数据时,会发现提交的数据都一样,刷新也无法解决。这是因为数据是使用了缓存中的数据。
  • 传入参数中的cache可以控制缓存。cache(默认为true,dataType'script''jsonp'时默认为false),如果设置为false,浏览器将不会缓存该页面。注意:只有当使用设置为GET方法,设置cachefalse是有用的,设置cachefalse将在HEADGET请求中正常工作,相当于在在GET请求参数中附加"={timestamp}",这样每次发起请求都会加上新的时间戳而形成新的请求并由后台相应,不会从本地缓存中查找。二当使用POST方法时,则每次都会被认为是新的请求,而不会缓存页面。
  • 如果想取消缓存,那么每次提交的URL不一样就行了,比如在URL后面+随机数,或者加上时间戳:
  $.ajax({
    data:"xxx",
    url:"aaa.php?"+Math.random() // 或者+new Data()
  });

或者将jquery ajax 中的cache设置为false:

$.data({
    data:"xxx",
    url:"aaa.php?",
    cache:false
  });

jquery中data函数的作用?

  • data([key],[value])作用是在元素上存放数据,返回jquery对象。
    参数:
    key 储存的数据名
    value 将要储存的任意数据。
    data([key]) 返回匹配的元素集合中的第一个元素的给定名称的数据储存的值。

常用的jquery方法

  1. 给元素 $node添加 class active,给元素 $noed 删除 class active
$node.addClass('active');
$node.removeClass('active');
  1. 展示元素$node, 隐藏元素$node
$node.show();
$node.hide();
  1. 获取元素$node的 属性: idsrctitle, 修改以上属性
$node.attr('id');$node.attr('id','xxx');
$node.attr('src');$node.attr('src','xxx');
$node.attr('title');$node.attr('title','xxx');
  1. $node添加自定义属性data-src
$node.data('data-src','xxx');
  1. $ct内部最开头添加元素$node
$ct.prepend($node);
  1. $ct内部最末尾添加元素$node
$ct.append($node);
  1. 删除$node
$node.remove();
  1. $ct里内容清空
$ct.empty();
  1. $ct 里设置 html<div class="btn"></div>
$ct.html("<div class="btn"></div>");
  1. 获取、设置$node的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width();$node.height();   //内容 宽度和高度
$node.innerWidth();$node.innerHeight(); //内容+两边padding 宽度和高度
$node.outerWidth();$node.outerHeight(); //内容+两边padding+两边border 的宽度和高度
$node.outerWidth(true);$node.outerHeight(true); //内容+两边padding+两边border+两边margin 的宽度和高度
$node.width("60px");$node.height("60px");   //设置 内容 宽度和高度
$node.innerWidth("60px");$node.innerHeight("60px"); //设置 内容+两边padding 宽度和高度
$node.outerWidth("60px");$node.outerHeight("60px"); //设置 内容+两边padding+两边border 的宽度和高度
  1. 获取窗口滚动条垂直滚动距离
scrollY; //垂直滚动距离
scrollX; //水平滚动距离
  1. 获取$node到根节点水平、垂直偏移距离
//该偏移距离是以border的左上角为基础
$node.setoff().left;  //水平偏移距离
$node.setoff().top;   //垂直偏移距离
  1. 修改$node的样式,字体颜色设置红色,字体大小设置14px
$node.css({
  'color':'red',
  'font-size':'14px'
});
  1. 遍历节点,把每个节点里面的文本内容重复一遍
$node.each();
  1. $ct里查找class.item的子元素
$ct.find('.item');
  1. 获取$ct里面的所有孩子
$ct.children();
  1. 对于$node,向上找到 class.ct的父亲,在从该父亲找到.panel的孩子
$node.parent('.ct').find('.panel');
  1. 获取选择元素的数量
.length;
  1. 获取当前元素在兄弟中的排行
.index();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,719评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,337评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,887评论 0 324
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,488评论 1 266
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,313评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,284评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,672评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,346评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,644评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,700评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,457评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,316评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,706评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,261评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,648评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,859评论 2 335

推荐阅读更多精彩内容