进阶15 jQuery
2017-07-29 本文已影响0人
cheneyzhangch
题目1： jQuery 中， $(document).ready()是什么意思？
描述:当DOM准备就绪时，指定一个函数来执行。
.ready()方法提供了一种方法，使得一旦页面的文档对象模型（DOM）变为安全的操纵，就立即运行JavaScript代码。
题目2： $node.html()和$node.text()的区别?
-$node.html()
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容。
- $node.text()
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，
或设置匹配元素集合中每个元素的文本内容为指定的文本内容。
.text() 方法不能使用在 input 元素或scripts元素上。 input 或 textarea 需要使用 .val() 方法获取或设置文本值。得到scripts元素的值，使用.html()方法
题目3： $.extend 的作用和用法?
-
jQuery.extend( target， obj1, obj2, obj3...)
将obj1,obj2,obj3...合并到对象target中，如果target是未声明的对象，则会创建target并合并到target中去 -
jQuery.extend( [deep ], target, obj1,obj2... )
deep：如果是 true，合并成为递归（又叫做深拷贝）
题目4： jQuery 的链式调用是什么？
jQuery对象调用API之后返回的仍然是一个jQuery对象，我们可以对这个返回值再次调用API，形如 $node.parent().find().append().animate()，即链式调用
题目5： jQuery 中 data 函数的作用
在匹配元素上存储任意相关数据.
-
$node.data( key, value )
key： 类型: String， 一个字符串，用户存储数据的名称。
value： 类型: Anything， 新的数据值；它可以是任意的Javascript数据类型，除了undefined。 -
$node.data( obj )
obj: 类型: Object, 一个用于更新数据的 键/值对
$node.data(key)
返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
题目6：写出以下功能对应的 jQuery 方法：
- 给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass('active') // 添加class
$node.removeClass('active') // 删除class
- 展示元素$node, 隐藏元素$node
$node.hide() // 隐藏元素，宽度高度逐渐变小，向左上角收缩直至宽高为0
$node.show() // 显示元素，宽度高度逐渐变大，自左上角扩大直至预定宽高
$node.toggle() // 切换隐藏或显示状态，类似于hide()和show()的综合体
$node.fadeIn() // 通过淡入的方式显示匹配元素
$node.fadeOut() // 通过淡出的方式隐藏匹配元素
$node.fadeToggle() //以淡出或淡入的方式切换隐藏或显示状态，类似于fadeOut()和fadeIn的综合体
$node.slideDown() // 以滑动动画显示一个匹配元素，高度逐渐恢复至预定值
$node.slideUp() // 以滑动动画隐藏一个匹配元素，高度逐渐减小至0
- 获取元素$node 的 属性: id、src、title， 修改以上属性
$node.attr('id')
$node.attr('src')
$node.attr('title')
$node.attr('id','newId')
$node.attr('src','newSrc')
$node.attr('title', 'newTitle')
或者
$node.attr({
id: 'newId',
src: 'newSrc',
title: 'newTitle'
})
- 给$node 添加自定义属性data-src
$node.attr('data-src', 'newAttribute')
- 在$ct 内部最开头添加元素$node
$ct.prepend($node)
- 在$ct 内部最末尾添加元素$node
$ct.append($node)
- 删除$node
$node.remove // 将匹配元素集合从DOM中删除,同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据
$node.detach() // 从DOM中去掉所有匹配的元素,保存所有jQuery数据和被移走的元素相关联,需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用
- 把$ct里内容清空
$ct.empy() // 从DOM中移除集合中匹配元素的所有子节点,这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本以及事件处理函数
- 在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
- 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.height() // 获取计算后的高度值，获取元素的content高度，不包括padding、border和margin
$node.height(number) 或者 $node.height('100px') // 设置高度值
//如果写成100px的形式，为字符串类型，要加引号
$node.innerHeight() // 获取计算后的高度值，包括padding、不包括border和margin
$node.innerHeight(number) 或者 $node.innerHeight('100px') // 设置高度值
$node.outerHeight(参数)
// 获取计算后的外部高度
// 当参数传递true时，包含padding、border和margin的高度，
// 当参数传递true时，包含padding、border的高度，但不包含margin，
$node.outerHeight(value)
// 设置CSS外部高度，这个“value”参数可以是一个字符串（数字加单位）或者是一个数字
// 如果这个“value”参数只提供一个数字，jQuery会自动加上像素单位（px）。
// 应该是任何有效的可以为高度赋值的CSS尺寸（就像100px, 50%, 或者 auto）。
// 获取和设置宽度的方法与获取和设置高度的方法类似
- 获取窗口滚动条垂直滚动距离
$(window).scrollTop()
- 获取$node 到根节点水平、垂直偏移距离
$(node).offset()
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({'color': 'red', 'font-size': '14px'})
- 遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(){
var text = $(this).text()
$(this).text(text + text)
})
- 从$ct 里查找 class 为 .item的子元素
$ct.find('.item')
- 获取$ct 里面的所有孩子
$ct.children()
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parent('.ct').find('.panel')
- 获取选择元素的数量
$node.length()
$node.size() // 1.8之后废弃，建议采用$node.length()
- 获取当前元素在兄弟中的排行
$node.index()
题目7：用jQuery实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
$btn.on('click', function(){
$btn.css('background-color', 'red')
setTimeout(function(){$btn.css('background-color', 'blue')}, 5000)
})
- 当窗口滚动时，获取垂直滚动距离
$(window).scroll(function(){
console.log($(window).scrollTop())
})
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
$div.on('mouseenter',function(){
$div.css('background', 'red')
})
$div.on('mouseleave',function(){
$div.css('background', 'white')
})
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ipt {
width: 100px;
}
.focus {
border-color: blue;
}
</style>
</head>
<body>
<input class='ipt' , type="text">
<script>
var $ipt = $('.ipt')
// 触发focus事件时，添加class：focus
$ipt.on('focus', function () {
$ipt.addClass('focus')
})
// 输入转换为大写，并在控制台打印出
$ipt.on('input', function () {
$(this).val($(this).val().toUpperCase())
console.log($(this).val())
})
// 触发blur事件，删除class： focus
$ipt.on('blur', function () {
$ipt.removeClass('focus')
})
</script>
</body>
</html>
- 当选择 select 后，获取用户选择的内容
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="checkbox" value=car>
<span> 汽车 </span>
<input type="checkbox" value=ship>
<span> 轮船 </span>
<input type="checkbox" value=plane>
<span> 飞机 </span>
<script>
$('input').change(function(){
console.log($(this).val())
})
$('input').focus(function(){
console.log($(this).val())
})
</script>
</body>
</html>
