jquery中有许多常用的函数(方法),感觉进入了新世界!!现在就来总结学习以下。
Jquery 中, $(document).ready()
是什么意思?和window.onload
的区别? 还有其他什么写法或者替代方法?
$(document).ready()
:在所有DOM节点加载完成后运行括号内的内容,此时图片、视频、音频可能还没加载完成。可以同时写多个该函数。其他写法还有:$().ready(function(){})
或`$(function(){})
window.onload
:当页面所有内容加载完成后运行后面的代码,此时图片、视频等必须加载完毕,只能写一个window.onload
,后写的会覆盖之前的。
$node.html()
和$node.text()
的区别?
$node.html()
:获取节点内所有内容,包括文本和html标签。$node.text()
:获取节点内所有文本内容,只包括文本。
$.extend
的作用和用法?
- 当我们提供两个或多个对象给
$.extend()
,对象的所有属性都添加到目标对象(target参数)。 - 如果只有一个参数提供给
$.extend()
,这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标对象。这样,我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的 - 例子:将一个或多个对象合并到目标对象中:
var obj1 = {a:0,b:10};
var obj2 = {a:100,c:200};
var obj3 = $.extend(obj1,obj2);
console.log(obj1); // {a:100,b:10,c:200}
console.log(obj3); // {a:100,b:10,c:200}
extend()
会修改目标对象,如果我们不希望改动对象,,则可以将目标对象设为空对象,例子:
var obj1 = {a:0,b:10};
var obj2 = {a:100,c:200};
var obj3 = $.extend({},obj1,obj2);
console.log(obj1); // {a:0,b:10}
console.log(obj3); // {a:100,b:10,c:200}
extend()
所进行的合并操作是浅拷贝,如果对象的属性中有对象和数组,需要使用深拷贝,则可以给其加一个参数true
,例子:
// 不使用true参数,浅拷贝,将obj2.banana的指针复制给obj1.banana,只有price属性
var obj1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var obj2 = {
banana: { price: 200 },
durian: 100
};
$.extend( obj1, obj2 ); // {apple: 0, banana: { price: 200 }, cherry: 97, durian: 100}
// 使用true参数,深拷贝,将obj2.banana的属性再添加给obj1.banana,即有新的新的price属性,也有原来的weight属性
var obj1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var obj2 = {
banana: { price: 200 },
durian: 100
};
$.extend( obj1, obj2 ); // {apple: 0, banana: { price: 200 }, cherry: 97, durian: 100}
JQuery 的链式调用是什么?
- 当JQuery的方法的返回值仍然为当前对象的时候,可以继续调用该对象的方法,就叫做链式调用,如
$(ele).parents().find().addClass().hide();
就是典型的链式调用
JQuery ajax 中缓存怎样控制?
- 通过
cache
属性进行控制,其值默认为true(dataType为”script”和”jsonp”时默认为false),如果将其设置为false,浏览器将不会缓存此页面。 - 它的工作原理是在GET请求参数中附加
_={timestamp}
jquery 中 data 函数的作用
.data(key,value)
函数匹配的JQ对象上储存任意相关数据,或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值- 通过
data()
函数存储的数据都是临时数据,页面刷新后,之前存放的数据都将不存在。 - 例子如下:
$("body").data("ReedSun", "shuai");
console.log($("body").data("ReedSun"));
一些小例子
以下功能对应的 Jq 方法:
给元素 $node
添加 class active
,给元素 $noed 删除 class active
//添加class
$node.addClass("active");
//删除class
$noed.removeClass("active");
展示元素$node
, 隐藏元素$node
//展示元素
$node.show();
//隐藏元素
$node.hide();
获取元素$node
的 属性: id、src、title, 修改以上属性
- 获取元素属性:
var id = $node.attr("id");
var src = $node.attr("src");
var title = $node.attr("title");
- 修改元素属性:
$node.attr({
id: "header",
src: "www.jirengu.com",
title: "ReedSun"
});
给$node
添加自定义属性data-src
//添加自定义属性
$node.attr("data-src", "www.jirengu.com");
在$ct
内部最开头添加元素$node
//开头添加元素
$ct.append($node);
在$ct
内部最末尾添加元素$node
//末尾添加元素
$ct.prepend($node);
删除$node
//删除元素
$node.remove();
把$ct
里内容清空
//清空元素
$ct.empty();
在$ct
里设置 html <div class="btn"></div>
//设置html
$ct.html("<div class="btn"></div>);
获取、设置$node
的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
//获取宽度(不包括内边距、边框、外边距)
$node.width();
//获取宽度(包括内边距)
$node.innerWidth();
//获取宽度(包括内边距和边框)
$node.outerWidth();
//获取宽度(包括内边距、边框和外边距)
$node.outerWidth(true);
//获取高度(不包括内边距、边框、外边距)
$node.height();
//获取高度(包括内边距)
$node.innerHeight();
//获取高度(包括内边距和边框)
$node.outerHeight();
//获取高度(包括内边距、边框和外边距)
$node.outerHeight(true);
获取窗口滚动条垂直滚动距离
$(window).scrollTop();
获取$node
到根节点水平、垂直偏移距离
$node.offset();
修改$node
的样式,字体颜色设置红色,字体大小设置14px
$node.css({
"color", "red",
"font-size", "14px"
});
遍历节点,把每个节点里面的文本内容重复一遍
$node.each(function(){
$(this).text($(this).text+$(this).text);
});
从$ct
里查找 class 为 .item
的子元素
$ct.find(".item");
获取$ct
里面的所有孩子
$ct.children();
对于$node
,向上找到 class 为’.ct’
的父亲,在从该父亲找到’.panel’
的孩子
$node.parents(".ct").find(".penel");
获取选择元素的数量
$ct.size();
获取当前元素在兄弟中的排行
$ct.index();
一些操作的实现
当点击$btn
时,让 $btn
的背景色变为红色再变为蓝色
当窗口滚动时,获取垂直滚动距离
当鼠标放置到$div
上,把$div
背景色改为红色,移出鼠标背景色变为白色
当鼠标激活 input 输入框时让输入框边框变为蓝色,当输入框内容改变时把输入框里的文字小写变为大写,当输入框失去焦点时去掉边框蓝色,控制台展示输入框里的文字
当选择 select 后,获取用户选择的内容
加载更多(使用jquery中的ajax方法)
版权声明:本博客版权归ReedSun和饥人谷所有,转载须说明来源!