- jQuery 中， $(document).ready()的含义？
$(document).ready()当HTML元素加载完整执行js，不必等图片 视频 音频 等加载在执行。
window.onload 等图片 视频 音频 等加载在js
- $node.html()和$node.text()的区别?
跟 innerHTML与innerText一致,只不过没有参数就是获取，有参数就是设置内容
- $.extend 的作用和用法?
作用: 封装组件 有一些基本的参数可以使用，就可以使用$.extend, 而使用者传递参数来定制其他的内容。不能每次传递一大波参数。
用法: 详细用法
var obj = {}
var obj1 = {
name: 'lii',
age: 23
}
var obj2 = {
name: 'lii',
school: 'li'
}
第1种 $.extend(obj, obj1)。
2. var $opt = $.extend(true,obj1,obj2) ‘’深度‘复制’。
3. var $opt = $.extend({},obj1) {}复制obj1 $opt相当于{}。
4. var $opt = $.extend({},obj,obj1) 。
5. $.extend($.fn,obj1) 所有元素对象上都有obj1的属性和方法。
- jQuery 的链式调用是什么？
原来多行的执行语句，现在变成一行。每次返回this, this指向当前jq对象
var That = function{}
That.prototype = {
aaa: function(){
slot
return this
},
bbb: function(){
slot
return this
},
ccc: function(){
slot
return this
}
}
var that = new That()
that.aaa().bbb().ccc()
- jQuery 中 data 函数的作用
官方文档
$.data()方法允许我们在DOM元素上附加任意类型的数据，避免了循环引用的内存泄漏危险。如果DOM元素是通过jQuery方法删除或者用户离开页面时，jQuery同时也会移除添加在上面的数据
- 给元素 $node 添加 class active，给元素 $noed 删除 class active
- 展示元素$node, 隐藏元素$node
- 获取元素$node 的 属性: id、src、title， 修改以上属性
- 给$node 添加自定义属性data-src
- 在$ct 内部最开头添加元素$node
- 在$ct 内部最末尾添加元素$node
- 删除$node
- 把$ct里内容清空
- 在$ct 里设置 html <div class="btn"></div>
- 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
- 获取窗口滚动条垂直滚动距离
- 获取$node 到根节点水平、垂直偏移距离
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
- 遍历节点，把每个节点里面的文本内容重复一遍
- 从$ct 里查找 class 为 .item的子元素
- 获取$ct 里面的所有孩子
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
- 获取选择元素的数量
- 获取当前元素在兄弟中的排行
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
body{
padding: 0;
margin: 0;
}
.box{
position: absolute;
top: 10px;
left: 10px;
}
.ct{
padding: 5px;
border: 1px solid;
width: 20px;
height: 20px;
position: absolute;
/*left: 5px;
top: 5px;*/
}
</style>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<!--<div class="box">
<div class="ct"></div>
</div>-->
<a href="s" class="node">sdf</a>
<ul class="ct">
<li class="item">1</li>
<li>2
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</li>
<li class="index">3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// $node.addClass('active') 1
// $node.removeClass('active')
// $node.show() 2
// $node.hide()
// $node.attr({ 3
// 'id': '1',
// 'title': '2',
// 'src': '3'
// })
// $node.attr('data-src','1') 4
// $node.prepend($('<h2>hello world</h2>')) 5
//$node.append($('<h2>hello world</h2>')) 6
//$node.hide() 7
//$('.ct').empty() | $('.ct').html('') 8
//$('.ct').html('<div class="btn"></div>') 9
//console.log($('.ct').width())实际宽度 10
//console.log($('.ct').height())实际高度 10
//console.log($('.ct').innerWidth())实际宽度+padding
//console.log($('.ct').innerHeight())实际高度+padding
//console.log($('.ct').outerWidth())实际宽度+padding+border
//console.log($('.ct').outerHeight())实际高度+padding+border
//console.log($('.ct').outerWidth(true))实际宽度+padding+border
//console.log($('.ct').outerHeight(true))实际高度+padding+border
// $(window).srcollTop() 11
// console.log($('.ct').offset()) 12
// $('.node').css({'font-size':'14px','color': 'red'}) 13
// $('ul>li').each(function(){ 14
// var $text = $(this).text()
// $(this).text($text+$text)
// })
// $('.ct>li').each(function(){ 15
// if($(this).hasClass('item')){
// console.log('true')
// }
// })
// $('.ct *') | $('.ct').find('*') 16
// $(node).parents('.ct').children('.panel') 17
// console.log($('.ct>li').length) | $(el).size() 18
//console.log($('.index').index()) 19
</script>
</body>
</html>
