题目1: jQuery 中, $(document).ready()是什么意思?
$(document).ready()是当页面文档加载完成时才能进行,即是加载完网页中的DOM节点,(DOM节点绘制好)之后就执行,不必等到整个网页都加载完成后执行。
另外window.ready()是指网页中的所有元素加载完成时,才能执行,就是网页外部链接的资源和内部的资源都加载完成后才能执行。
具体的区别为:
**1.执行时间 **
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 (全部加载完成才执行)
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 (部分加载完成才执行)
**2.编写个数不同 **
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
**3.简化写法 **
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
题目2: $node.html()和$node.text()的区别?
区别:
$node.html()是返回demo节点(包括自己)的html结构和内容
$node.text()是返回node节点的文本
题目3: $.extend 的作用和用法?
具体形式为jQuery.extend( target [, object1 ] [, objectN ] ),返回的是target,但是target是object的集合。
如果各个object的属性相同,后值覆盖前值。
默认是进行浅拷贝的。就是没有属性,添加新属性。各个object的属性相同时,引用最后一个属性,因为是传地址的。
jQuery.extend demo
页面展示:{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
说明了在进行extend的时候,obj1的banana属性的值,是object2的banana属性的值,是在传地址,故是进行浅拷贝。
所以在version1.1.4的时候,添加了新的属性。
表现形式为jQuery.extend( [deep ], target, object1 [, objectN ] )
deep : Boolean。为true,则进行深拷贝,深拷贝就是相当于我们window中的复制一样,创建的是一个新的对象了。警告: 不使用false(规定)
题目4: jQuery 的链式调用是什么?
因为JQuery的方法都会默认返回一个对象,然后进行调用方法
method。表现形式为:$('.c').extend().css();
大体为$selector.method().method().mothod()..........
题目5: jQuery 中 data 函数的作用
作用: 给node绑定任意的数据(除了undefined)
表现形式为:node.data(obj) ;新版本
题目6:
写出以下功能对应的 jQuery 方法:
1、给元素 $node 添加 class active,给元素 $noed 删除 class active
$node.addClass('active') //添加clss active
$node.removeClass('active') //删除class active
2、展示元素$node, 隐藏元素$node
$node.show(); //展示元素
$node.hide(); //隐藏元素
$node.toggle(); //$node切换展示或隐藏状态
3、获取元素$node 的 属性: id、src、title, 修改以上属性
$('#id'); //获取$node的id
$node.attr('src') //获取$node的src
$node.attr('title') //获取$node的title
4、给$node 添加自定义属性data-src
$node.attr('data-src','value')
5、在$ct 内部最开头添加元素$node
$ct.prepend('$node')
或是 ('$node').prependTo('$ct') //注意是在内部的,是父子关系
6、在$ct 内部最末尾添加元素$node
$ct.append('$node')
或是 ('$node').appendTo('$ct') //注意是在内部的,是父子关系
7、删除$node
$node.remove(); //自己都删除,何况子元素
8、把$ct里内容清空
$ct.empty();//清空$ct中的子元素,留下父元素$ct
9、在$ct 里设置 html
1、$ct.add('')
2、$ct.html('')
10、获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width()//$node的宽度,不包括padding
$node.height()//$node的高度,不包括padding
$node.innerHeight() //$node的宽度,包括padding,不包括border
$node.innerWidth() //$node的高度,包括padding,不包括border
$node.outerHeight() // outerHeight(),是默认false,是不包括margin,$node的高度,包括border,并不包括margin
$node.outerWidth() // outerWdith(),是默认false,是不包括margin,$node的宽度,包括border,并不包括margin,设置为true,则包括了,则为元素的外盒模型。(没有margin的盒子模型为内盒模型)
$node.outerWidth(true) // 包括外边距
$node.outerWidth() // 包括外边距
11、获取窗口滚动条垂直滚动距离
$window.scrollTop()
12、获取$node 到根节点水平、垂直偏移距离
$node.scrollTop()//垂直偏移距离~~
$node.offset()
13、修改$node 的样式,字体颜色设置红色,字体大小设置14px
$node.css({'color':'red','font-size':'14px'}) //使用对象的写法就好了
14、遍历节点,把每个节点里面的文本内容重复一遍
$.each(obj,function(){
$(this).text().clone()
})
15、从$ct 里查找 class 为 .item的子元素
$ct.each(function(){
if($(this).children().hasClass('item'))
{return $(this).children()}
})
或是
$ct.children().filter('.item') //刚刚想到
或是
$ct.find('.item') //find(),这个更好。
16、获取$ct 里面的所有孩子
$ct.children();
17、对于$node,向上找到 class 为'.ct'的父亲,在从该父亲找到'.panel'的孩子
$node.parents('.ct').children('.panel')
18、获取选择元素的数量
$(selector).length //一个数量就是一个长度。
19、获取当前元素在兄弟中的排行
$(this).index()
**题目7:**
用jQuery实现以下操作
1、当点击$btn 时,让 $btn 的背景色变为红色再变为蓝色
$btn.click(function(){$(this).css('style','blue')})
2、当窗口滚动时,获取垂直滚动距离
$.window.scrollTop();
3、当鼠标放置到$div 上,把$div 背景色改为红色,移出鼠标背景色变为白色
$div.hover(function(){$(this).css('background','red')},function(){$(this).css('background','blue')})
4、当鼠标激活 input 输入框时让输入框边框变为蓝色,当输入框内容改变时把输入框里的文字小写变为大写,当输入框失去焦点时去掉边框蓝色,控制台展示输入框里的文字
5、当选择 select 后,获取用户选择的内容
同一个demo: https://github.com/komolei/demo/blob/master/JQuery/test-extend.html
**题目8:** 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面[效果预览124](http://jrgzuoye.applinzi.com/%E4%BD%9C%E4%B8%9A%E5%AE%89%E6%8E%92/jscode/JS9-jqueryajax/1.html)
demo:https://github.com/komolei/demo/tree/master/JQuery/task151
~~~**题目9:** 实现一个天气预报页面,前端展示自由发挥,数据接~~口: http://api.jirengu.com/weather.php
(选做题目)
~~有一个更好用的天气 API~~ :[心知天气](https://jscode.me/t/api/781)