任务26 jquery常用方法和ajax

2016-12-02 本文已影响0人 GarenWang

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

二者的区别如下图：

task26-1.png

参考资料：锋利的jquery-09页

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

Node(节点)是DOM层次结构中的任何类型的对象的通用名称，Node有很多类型，如元素节点，属性节点，文本节点，注释节点等，通过NodeType区分，常见的有：

task26-2.png
Element继承了Node类，也就是说Element是Node多种类型中的一种，即当NodeType为1时Node即为ElementNode，另外Element扩展了Node，Element拥有id、class、children等属性。

$node.html()是获取元素的html内容
$node.text()是获取元素文本内容

demo

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">    </script>
  <title>JS Bin</title>
  </head>
  <body>
  <p>这是一个 <b>加粗的 </b> 段落</p>
  <script>
   $(function(){
    $("p").on('click',function(){
    console.log($('p').html())
  })
   $("p").on('click',function(){
    console.log($('p').text())
      })
   }) 
  </script>
  </body>
  </html>

demo演示

3.$.extend 的作用和用法?

作用：将两个或更多对象的内容合并到第一个对象。
写法：jQuery.extend( target [, object1 ] [, objectN ] )
当我们提供两个或多个对象给$.extend()时，对象的所有属性都添加到目标对象（target参数）。如果目标对象（target参数）的某个属性在附加对象（ [, object1 ] [, objectN ] ）中没有，那么这个属性会在合并后保留。反之，如果附加对象中的某个属性在目标对象中没有，这个属性在合并后也会保留。如果目标对象的某个属性在附加对象中有，那么这个属性的值会被附加对象的值覆盖
用法1：合并两个对象，并修改第一个对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body>
<div id="log"></div>
<div id="ct"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
$.extend(object1, object2);
$("#log").append(JSON.stringify(object1));
</script>
</body>
</html>
demo演示
采用递归方式合并两个对象，并修改第一个对象。
jQuery.extend( [true], target, object1 [, objectN ] )如果将 true
作为该函数的第一个参数，那么会在对象上进行递归的合并,若设置了 deep参数，对象和数组也会被合并进来，但是对象包裹的原始类型，比如String, Boolean, 和 Number是不会被合并进来的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body>
<div id="log"></div>
<div id="ct"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
$.extend(true,object1, object2);
$("#log").append(JSON.stringify(object1));
</script>
</body>
</html>
demo演示
合并 defaults 和 options 对象，并且不修改 defaults 对象。这是常用的插件开发模式。jQuery.extend({}， [, object1 ] [, objectN ] )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="log"></div>
<div id="ct"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
var object3=$.extend({},object1,object2);
$("#log").append("<div>"+JSON.stringify(object1)+"</div>");
$("#log").append("<div>"+JSON.stringify(object2)+"</div>");
$("#log").append("<div>"+JSON.stringify(object3)+"</div>");
</script>
</body>
</html>
demo

4.JQuery 的链式调用是什么？

对发生在同一个jQuery对象上的一组动作了，可以直接连写而无需重复获取对象
$('div').removeClass('hover').addClass('focus'),silbings.show()
这么做的好处是让代码更加简洁易读，减少重复性代码，提高性能。其中的原理是执行完一个方法后就返回对象本身（return this），然后对象继续执行后面的方法。

5.JQuery ajax 中缓存怎样控制?

jQuery ajax方法中是利用cache参数来控制缓存。
设置为true将缓存页面（默认为ture， dataType为”script”和”jsonp”时默认为false。），如果设置为false，浏览器将不会缓存页面。
$.ajax不缓存版本
$.ajax({
type:"GET"
url:'test.html',
cache:false,
dataType:"html",
success:function(msg){
alert(msg); }
});

6.jquery 中 data 函数的作用

**描述: **在匹配元素上存储任意相关数据.
.data( key, value )
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
描述:返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。通过.data(name, value)或HTML5 data-* 属性设置:.data( key )
alert($('body').data('foo'));
alert($('body').data());
alert( $("body").data("foo")); //undefined
$("body").data("bar", "foobar");
alert( $("body").data("bar")); //foobar

代码题

代码题1
代码题2
代码题3

任务26 jquery常用方法和ajax

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

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

demo

3.$.extend 的作用和用法?

4.JQuery 的链式调用是什么？

5.JQuery ajax 中缓存怎样控制?

6.jquery 中 data 函数的作用

代码题

代码3本地测试成功

版权为饥人谷和作者所有，若转载请注明出处

猜你喜欢

热点阅读

任务26 jquery常用方法和ajax

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

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

demo

3.$.extend 的作用和用法?

4.JQuery 的链式调用是什么？

5.JQuery ajax 中缓存怎样控制?

6.jquery 中 data 函数的作用

代码题

代码3本地测试成功

版权为饥人谷和作者所有，若转载请注明出处

猜你喜欢

热点阅读

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