jquery面试需要看的基本东西-程序员宅基地

技术标签: 面试  ViewUI  javascript  

1. offset() 方法的学习
offset().left offset().top 表示离document的距离。(浏览器可以看到的地方的距离)
2. position与offset的区别:
a.使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
b.使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移。
c.使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移。
3.$(window).scrollTop() scroll这个事件。
4.
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
5.jquery 的each循环用return false; //跳出循环
$("img").size(); 计算元素个数。
6.$("img").length;
7.返回传给jQuery()的原始选择器。
$("ul")
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector + "</li>")
.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
结果:
ul
ul li
div#foo ul:not([class])
9.重点中的重点:
取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
10. jquery的detach方法。
11.
这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get(0);
[ <img src="test1.jpg"/> ]
-----------------------------------------------------
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get().reverse();
[ <img src="test2.jpg"/> <img src="test1.jpg"/> ]
这里只是数组中的值位置换了,但是页面中并没有变化。
10.prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素(siblings作为第一个选择器的同辈)
11. jquery的width,innerWidth,outerWidth
这个我们知道,width指的是content的width.
innerWidth指的是包含padding的距离。
outerWidth指的是包含border的距离。
12. jquery的each方法
无参数的时候;
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
$(selector).each(function(index,element))
13.
html代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").size();
结果:2
14.
html代码:<img src="test1.jpg"/> <img src="test2.jpg"/>
jquery代码:$("img").length;
显示结果:2
15.
jquery代码:$("ul")
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector + "</li>")
.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
显示结果:ul
ul li
div#foo ul:not([class])
16.
$('.yan1 .yan2').bind('click',function(){
alert($(this).index());
},function(){alert('hellor world')});
这样写点击之后只会触发一个函数。hello world这个函数。

17. data的用法()
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
第二种用法:
<img class='yan3' src="test2.jpg" data-flag='yanjinyun'/>
$('.yan3').data('flag')
第三种用法:
<img class='yan4' src="test2.jpg" data-flag-name='yanjinyun2'/>
$('.yan4').data('flagName')
18.removeData
这个方法是不能移除标签中的属性的,只能通过,
$('.yan3').removeData('flag');//这个方法只是删除缓存。
$('.yan3').removeAttr('data-flag');
19.队列控制
queue(e,[q])
dequeue([queueName])
clearQueue([queueName])
20.
jquery如果类似于disable等属性,用prop属性,其他的用attr属性。
21.position方法是相对最近的一个相对的距离。
22. juqery中$('div')表示的是div的元素。而$('<div>')表示是创建一个div元素。
$('<div></div>')也是。
23.wrap是每个都添加一个,而wrapAll是每个都添加一个。
24.
参数html描述:
把所有段落内的每个子内容加粗
jQuery 代码:
$("p").wrapInner("<b></b>");参数elem描述:
把所有段落内的每个子内容加粗
jQuery 代码:
$("p").wrapInner(document.createElement("b"));
25.
HTML 代码:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>jQuery 代码:
$('.inner').wrapInner(function() {
return '<div class="' + $(this).text() + '" />';
});结果:
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>
26. animate
$('.yan1').animate({marginTop:'300px'},2000);
(1)必须写大括号,(2)如果有-的必须用大写代替。
27.queue函数
显示队列长度
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
debugger;//1
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
debugger;//8
}
debugger;
runIt();
28.grep函数
过滤数组中小于 0 的元素。
$.grep( [0,1,2], function(n,i){
return n > 0;
});
[1, 2]
排除数组中大于 0 的元素,使用第三个参数进行排除。
$.grep( [0,1,2], function(n,i){
return n > 0;
}, true);
[0]
----------------------------------------------------------------------
29.$.grep(使用过滤函数过滤数组元素。
var ss= $.grep( [3,1,2], function(n,i){
alert(n+' '+i);//3,0 1,1 2,2
return n > 0;
});
ss的值是1,2
30.stop 停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行
31.andSelf() 加入先前所选的加入当前元素中
选取所有div以及内部的p,并加上border类
<div><p>First Paragraph</p><p>Second Paragraph</p></div>
$("div").find("p").andSelf().addClass("border");
<div class="border">
<p class="border">First Paragraph</p>
<p class="border">Second Paragraph</p>
</div>

31.add 把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
<p>Hello</p><span>Hello Again</span>
$("p").add("span")
[ <p>Hello</p>, <span>Hello Again</span> ]
====================================================
jquery的选择方法的简述
32. filter 筛选出与指定表达式匹配的元素集合。
$("p").filter(".selected")
33. is 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
$("input[type='checkbox']").parent().is("form")
34. map 将一组元素转换成其他数组(不论是否是元素数组)
你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
35.has保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代,含有匹配后代的对象将得以保留。
$('li').has('ul').css('background-color', 'red');
36.not
删除与指定表达式匹配的元素
$("p").not( $("#selected")[0] )
37.slice,从a开始,b个数。
$("p").slice(0, 1).wrapInner("<b></b>");
==========================================================
Jquery的查找方法
38.children closest
closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。
39. find next
40. nextall nextUntil
nextall 查找当前元素之后所有的同辈元素。
nextUntil 查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止。
parentsUntil 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
41
prev 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll 查找当前元素之前所有的同辈元素
prevUntil 查找当前元素之前所有的同辈元素,直到遇到匹配的那个元素为止。
42.siblings
43.fadeIn fadeOut fadeToggle
fadeTo
用600毫秒缓慢的将段落的透明度调整到0.66,大约2/3的可见度
$("p").fadeTo("slow", 0.66);
44.slideDown slideUp slideToggle
45.animate stop
============================================================================
jquery高级方法的使用:
46. $.browser
$.browser.msie
$.browser.safari
$.browser.opera
$.browser.msile
47.$.support
boxModel: 如果这个页面和浏览器是以W3C CSS盒式模型来渲染的,则等于true。通常在IE 6和IE 7的怪癖模式中这个值是false。在document准备就绪前,这个值是null。
cssFloat: 如果用cssFloat来访问CSS的float的值,则返回true。目前在IE中会返回false,他用styleFloat代替。
hrefNormalized: 如果浏览器从getAttribute("href")返回的是原封不动的结果,则返回true。在IE中会返回false,因为他的URLs已经常规化了。
htmlSerialize: 如果浏览器通过innerHTML插入链接元素的时候会序列化这些链接,则返回true,目前IE中返回false。
leadingWhitespace: 如果在使用innerHTML的时候浏览器会保持前导空白字符,则返回true,目前在IE 6-8中返回false。
noCloneEvent: 如果浏览器在克隆元素的时候不会连同事件处理函数一起复制,则返回true,目前在IE中返回false。
objectAll: 如果在某个元素对象上执行getElementsByTagName("*")会返回所有子孙元素,则为true,目前在IE 7中为false。
opacity: 如果浏览器能适当解释透明度样式属性,则返回true,目前在IE中返回false,因为他用alpha滤镜代替。
scriptEval: 使用 appendChild/createTextNode 方法插入脚本代码时,浏览器是否执行脚本,目前在IE中返回false,IE使用 .text 方法插入脚本代码以执行。
style: 如果getAttribute("style")返回元素的行内样式,则为true。目前IE中为false,因为他用cssText代替。
tbody: 如果浏览器允许table元素不包含tbody元素,则返回true。目前在IE中会返回false,他会自动插入缺失的tbody。
===================================================================================
48.$.each的用法

var ss={
a:'1',
b:'2',
c:'3'
}
$.each(ss,function(index,item){
if(item == '2'){
return true;//return false
}
alert(item);
});

return true 和continue;一样。

return false和break;一样。

49.对于一般的属性用attr就行,对于checked或者selected这些属性用prop这个方法。

 

转载于:https://www.cnblogs.com/coding4/p/5526327.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/de1981/article/details/102147173

智能推荐

php composer.phar install,解决composer.phar安装问题-程序员宅基地

文章浏览阅读1.4k次。下面由composer使用教程栏目为大家介绍composer.phar安装问题的解决办法,希望对需要的朋友有所帮助!问题:下载composer.phar文件根据官方教程安装完毕,运行composer指令时报错:PHP Fatal error: Uncaught exception 'PharException' with message 'phar...解决:注:Composer 是 PHP 的一..._php composer.phar install

Docker容器的ubuntu镜像配置apt国内源_docker ubuntu apt源 知乎-程序员宅基地

文章浏览阅读6.4k次,点赞6次,收藏18次。1、问题描述  在Docker容器中安装ubuntu镜像之后,默认使用的软件源是ubuntu的官网,速度非常慢,更新软件包经常报错  而且初始镜像默认没有安装vim命令,导致修改/etc/apt/sources.list会很麻烦。2、解决方案使用sed命令进行替换。sed -i s@/archive.ubuntu.com/@/mirrors.aliyun.com/@g /etc/apt/sources.listsed -i s@/security.ubuntu.com/@/mirrors.al_docker ubuntu apt源 知乎

【ArrayList】——java.util.ArrayList源码分析_elementdata = (size == 0)-程序员宅基地

文章浏览阅读9k次,点赞3次,收藏3次。一、ArrayList类这里分析jdk 1.8,包含一些1.8新特性的源码继承树如下:宏观上说,ArrayList是基于动态数组实现的,数组具有按索引查找的特性,所以访问很快,适合经常查询的数据。public class ArrayList<E> extends AbstractList<E> implements List<..._elementdata = (size == 0)

cocos2d-x 4.0 安装教程(Windows + VS) + cocosui入门知识储备_coscos2d-x 安装-程序员宅基地

文章浏览阅读7.4k次,点赞13次,收藏49次。(一)前期准备Windows 10操作系统VS 2019 或 VS 2017Python 2.7.18:记得勾选将python添加到环境变量的复选框,不然自己手动添加也行。CMake 3.19.0:记得勾选将cmake添加到环境变量的复选框,不然自己手动添加也行。cocos2d-x 4.0:手动将cocos2d-x-4.0\tools\cocos2d-console\bin目录添加到环境变量。以上全都下载最新版本应该也没问题,至此就可以使用VS来编译cocos2d-x工程了。(二)VS编_coscos2d-x 安装

aui ajax,jsp - ajax on aui:select liferay - Stack Overflow-程序员宅基地

文章浏览阅读112次。Suppose we have a two select, one is for selecting subject and another one is populating topic automatically according subject selection: This example I've tried with Ajax and was successful!**In JSP:..._aui ajax

vue 锚点链接之scrollIntoView_vue scrollintoview-程序员宅基地

文章浏览阅读355次。vue 锚点链接之scrollIntoView组件左右分布 利用id控制锚点链接父组件将点击的id传到子组件,然后子组件接收到id,监听!_vue scrollintoview

随便推点

磊科无线路由器设置方法详解_科磊路由器设置-程序员宅基地

文章浏览阅读1.4k次。一直以来磊科无线路由器的性能和质量都是很不错的,相信有不少的电脑用户都在使用磊科路由器,那么今天笔者就与大家一起分享磊科路由器的设置方法,以便于用户能够正确快速的运用磊科路由器。 首先我们需要对照设备接线的参考图来将磊科路由器的接线弄好。 接好之后我们在Ie浏览器中输入路由器的默认ip地址打开路由器设置登录界面。 在用户名与密码框中_科磊路由器设置

输入一个百分制的成绩t,将其转换成对应的等级输入数据有多组,每组占一行,由一个整数组成。_输入一个百分制成绩t-程序员宅基地

文章浏览阅读1.4w次。一、要求具体转换规则如下: 90~100为A; 80~89为B; 70~79为C; 60~69为D; 0~59为E;输入数据有多组,每组占一行,由一个整数组成。对于每组输入数据,输出一行。如果输入数据不在0~100范围内,请输出一行:“Score is error!”。二、代码实现#includeint main(){ int score; wh_输入一个百分制成绩t

CSS---position属性(超详解)_css position left取值-程序员宅基地

文章浏览阅读1.2k次,点赞3次,收藏8次。html 超文本编辑语言_css position left取值

Robot Framework测试库(标准和扩展库)提供部分扩展库的下载方法_robotframework-requests下载-程序员宅基地

文章浏览阅读1.5k次。Robot Framework测试库(标准库和扩展库)提供部分扩展库的下载方法_robotframework-requests下载

Page<> result = PageHelper.startPage()分页插件打印数据问题_page.getresult是分页后的数据吗-程序员宅基地

文章浏览阅读745次。今天学习分页插件发现打印出来的数据都是分页的信息没有分页的数据就探索了一下 QueryWrapper<User> wrapper = new QueryWrapper<>(); wrapper.eq("isDel", 0); Page<User> result = PageHelper.startPage(1, 5);//分页 userMapping.selectList(wrapper);//查询 Sy_page.getresult是分页后的数据吗