1、为什么使用jquery,他有哪些好处?
- 1)轻量级、代码简洁
- 2)强大的选择器,出色的DOM操作封装
- 3)有可靠的事件处理机制
- 4)浏览器兼容性好
- 5)支持链式操作
- 6)支持丰富的插件
2、jquery有哪些选择器
- 基本选择器:id、标签、class选择器
- 层级选择器:$(“form input”)
- 伪类选择器:$(“div:first”)
- 表单选择器:$(":input")
3、$(document).ready()和window.onload有什么区别
- window.onload方法是在网页中所有的元素完全加载到浏览器后才执行
- $(document).ready() 可以在DOM载入就绪时候就对其进行操纵,并调用执行绑定的函数
4、jquery对象和DOM对象是如何转换的
- jQuery对象是一个包含了dom对象的数组 可以通过jQuery对象[下标]获取dom对象
- Dom对象放入$("")中转为jQuery对象
5、attr()与prop()的区别
- attr操作自定义属性
- prop更适合操作表单元素
6、jQuery中使用过哪些插入节点的方法
- append:向每个匹配的元素内部追加内容
- appendTo:将所有匹配的元素追加到指定的元素中
- after:在每个匹配元素之后插入内容
- insertAfter:将所有配的元素插入到指定元素的后面
- before:在每个匹配的元素之前插入内容
- insertBefore:将所有匹配的元素插入到指定的元素的前面
7、说出jQuery中常见的几种函数以及他们的含义是什么
- get()取得所有匹配的DOM元素集合
- append()向每个匹配的元素内部追加内容
- find()搜索所有与指定表达式匹配的元素
- bind()为每个元素的特定事件绑定事件处理函数.
- empty()删除匹配的元素集合中所有的子节点
8、radio单选组的第二个元素为当前选中的值,该怎么去取
- $(‘input[type=radio]’)[1].checked=true
9、jquery中的选择器 和 css中的选择器有区别吗
- jQuery选择器支持CSS里的选择器
- jQuery选择器可用来添加样式和添加相应的行为
- CSS 中的选择器是只能添加相应的样式
10、在jquery中你是如何去操作样式的
- addClass() 来追加样式
- removeClass() 来删除样式
- toggle() 来切换样式
11、子元素选择器和后代选择器元素有什么区别
- 子元素是找子节点下的所有元素
- 后代元素是找子节点或子节点的子节点的元素
12、Jq如何判断元素显示隐藏
//第一种:使用CSS属性
var display = $('#id').css('display');
if(display == 'none'){
alert("我是隐藏的!");
}
//第二种:jQuery判断元素是否显示 是否隐藏
var node=$('#id');
if(node.is(':hidden')){//如果node是隐藏的则显示node元素,否则隐藏
node.show();
}else{
node.hide();
}
13、Jq中get和eq有什么区别
-
get() :取得其中一个匹配的元素。num表示取得第几个匹配的元素,get多针对集合元素,返回的是DOM对象组成的数组
-
eq():获取第N个元素,下标都是从0开始,返回的是一个JQuery对象
14、用jquery实现一个拖拽
$('#box').mousedown(function(ev){
let disX = ev.pageX - $('#box').position().left;
let disY = ev.pageY - this.offsetTop;
$(document).mousemove(function(ev){
$('#box').css({
left:ev.pageX - disX,
top:ev.pageY - disY
});
});
$(document).mouseup(function(ev){
$(document).off();
});
});
15、Jq中如何实现多库并存
- Noconfict 多库共存就是“$ ”符号的冲突
- 方法1:利用jQuery的实用函数$.noConflict()
- 方法2:(function($){})(jQuery)
- 方法3:jQuery(function($){})
16、jQuery 中如何将数组转化为 JSON 字符串,然后再转化回来
// 通过原生 JSON.stringify/JSON.parse 扩展 jQuery 实现
$.array2json = function(array) {
return JSON.stringify(array);
}
$.json2array = function(array) {
// $.parseJSON(array); // 3.0 开始,已过时
return JSON.parse(array);
}
// 调用
var json = $.array2json(['a', 'b', 'c']);
var array = $.json2array(json);
17、jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝
- 浅拷贝(只复制一份原始对象的引用)
var newObject = $.extend({}, oldObject); - 深拷贝(对原始对象属性所引用的对象进行进行递归拷贝)
var newObject = $.extend(true, {}, oldObject);
18、使用jquery实现一个可持续的动画
$('button').on('click',function () {
$('div').animate({left:1000},2000)
.animate({top:300}, 2000)
.animate({left:0,top:300},2000)
.animate({left:0,top:50},2000,function () {
//触发事件
// $('button').trigger('click')
$('button').click()
})
})
19、jquery如何绑定多个事件
$(target).on(“click focus”,fn)
20、针对 jQuery 的优化方法
- 尽量使用id选择器代替class选择器
- 总是从#id选择器来继承
- 尽量使用链式操作
- 使用时间委托 on 绑定事件
- 采用jQuery的内部函数data()来存储数据
- 使用最新版本的 jQuery