jQuery 中， $(document).ready()是什么意思？
当DOM加载完毕以后，执行指定的代码
$(document).ready(function() { //也可指定具体函数名；
//do something..
})
window.onload只有当页面完全加载完毕（图片资源等）才执行指定的回调函数，而$(document).ready()只要DOM加载完成就会执行指定的回调函数
$node.html()和$node.text()的区别?
$node.html()获取的是元素内的HTML，$node.text()获取的是元素内的文本
两者不接受参数时为获取，设置参数时为设置具体内容
假设HTML片段
<div id="box">
<p>Hello world!</p>
</div>
$("#box").html() // <p>Hello world!</p>
$("#box").text() // Hello world!
$.extend 的作用和用法?
$.extend([deep,] target [, object1 ] [, objectN ])把多个对象合并到目标对象中，修改并返回目标对象
[deep]：布尔值，是否进行深合并；默认为false
target：合并的目标；
[object1]：合并项；
这么两个对象
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
obj2合并到obj1中，obj1被改变，属性为对象会被重写
$.extend( object1, object2 ); //obj1 ={"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
设置[deep]则对象属性也会进行合并
$.extend( true, object1, object2 ); //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
如果希望产生一个新的合并对象，不改变任何对象，可以使用一个空对象作为target
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend( {}, defaults, options );
//defaults --> {"validate":false,"limit":5,"name":"foo"}
//options --> {"validate":true,"name":"bar"}
//settings --> {"validate":true,"limit":5,"name":"bar"}
jQuery 的链式调用是什么？
在jQuery的语法中，本质上都是函数的调用，每次调用函数，都会产生一个新的结果，再在新的结果上调用另外的函数
在这种情况下，我们可以把调用的函数写成一行
$(element).function1().function2().function3().function4()
形如这样的调用称为链式调用
jQuery中data函数的作用
data()用于向匹配元素存储数据或从匹配的第一个元素中获取data()方法存储的数据
$(element).data() //不给于参数，获取所有的数据；
$(element).data(name) //通过数据名称name获取数据；
$(element).data(name,value) //通过key = value的方式存储数据；
$(element).data(object) //传递一个对象方式存储数据
注意undefinef是一个无效的值
$(element).data("name",undefined) //设置name的值为undefined是无效的
$(element).data（“name") //等同于这句，获取name的值
HTML5新的属性data-*可以用来在HTML标签中添加自定义属性来存储数据，jQuery的.data()同样可以获取到这些值
<h1 data-name="Jack">
$("h1").data("name") // "Jack"
写出以下功能对应的 jQuery 方法
//给元素$node 添加class active，给元素$noed删除class active
$node.addClass("active") //添加
$node.removeClass("active") //删除
// 隐藏元素$node
$node.hide() //逐步改变宽高，display为none
$node.fadeOut() //逐步改变透明度，display为none
$node.slideUp() //向上活动隐藏元素
//显示元素$node
$node.show()
$node.fadeIn()
$node.slideDown()
//获取元素$node的属性: id、src、title
$node.attr("id") //一个参数为获取目标属性值
$node.attr("title")
$node.title("src")
//修改元素$node 的 属性: id、src、title
$node.attr("id","link") //两个参数为设置目标属性值
$node.attr("title","address")
$node.title("src","http://www.baidu.com")
//给$node添加自定义属性data-src
$node.attr("data-src","xxxx")
//在$ct 内部最开头添加元素$node
$ct.prepend($node)
//在$ct 内部最末尾添加元素$node
$ct.append($node)
//删除$node
$node.remove([seletor]) //可以添加一个选择器参数来过滤删除对象
//把$ct里内容清空
$ct.empty([seletor]) //可以添加一个选择器参数来过滤清空的内容
//在$ct 里设置 html <div class="btn"></div>
$ct.html("<div class="btn"></div>")
//获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width() //获取元素content宽度
$node.height() //获取元素content高度
$node.innerWidth() //获取元素（content+padding）宽度
$node.innerHeight() //获取元素（content+padding）高度
$node.outerWidth() //获取元素（content+padding+border）宽度
$node.outerHeight() //获取元素（content+padding+border）高度
$node.outerWidth(true) //获取元素（content+padding+border+margin）宽度，只读
$node.outerHeight(true) //获取元素（content+padding+border+margin）高度，只读
//传递参数(Number or String)可设置相应的值
//获取窗口滚动条垂直滚动距离
$(element).scroll(function() {
console.log($(element).scrollTop()) //.scroll()监听滚动事件；scrollTop()获取当前匹配元素垂直滚动条的位置
})
//获取$node 到根节点水平、垂直偏移距离
$node.offset() //获取$node相对document的坐标
//修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({color: "red",font-size: "14px"})
//遍历节点，把每个节点里面的文本内容重复一遍
$(node).each(function(index,element) {
var text = element.innerText
$(element).text(text + text)
})
//从$ct 里查找 class 为 .item的子元素
$ct.find(".item")
//获取$ct 里面的所有孩子
$ct.children() //可以传入选择器参数进行过滤，具体选择什么孩子
//对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parent(".ct").children(".panel")
//获取选择元素的数量
$node.length
$node.size()
//获取当前元素在兄弟中的排行
$node.index() //可以传递选择器参数进行过滤，确定在什么范围排行
实现如下效果
http://js.jirengu.com/wakahelaha/3/edit
网友评论