基础知识
1、DOM和jQuery对象相互转换的方法
var obox=document.getElementById('box');
var obox=document.querySelector('.case'); obox=$('#box'); document.write($('#box')); document.write(obox);
2、body中的onload()函数和jQuery中的document.ready()有什么区别? document.ready()和传统的方法 有什么区别?
onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片,视频,音频)的加载,因此,使用document.ready()方法的执行速度比onload()的方法要快。 $(document).ready()是文档结构已经加载完成(不包含图片等非文字媒体文件),不必等到所有的加载完毕。 $(document).ready(function(){});
3、使用jQuery给div添加蓝色背景
$('#box').css('background','blue');
4、如何利用jQuery来向一个元素中添加和移除CSS类 obox.classList.remove('case');//移除css类 $('.case').remove('.case'); obox.classList.add('case1');//添加css类 $('.case').addClass('case1'); $('.case').toggleClass('case1');//点击切换类名 document.write($('div').hasClass('case')); //hasClass()判断某个元素是否已经被赋予某个CSS类
5、举例5个数组对象的函数,5个字符串对象的函数? 作用?(非jQuery)
6、样式优先级 权重(CSS) 样式优先级 权重(CSS) 内部样式 外部样式 行内样式也叫内联样式 行内样式 权重为1000 内外部样式表权重跟书写顺序有关 写在下面的优先级高
7、jquery如何获取所有选中特定值的单选框和复选框 $(function() {$("input[type='button']").click(function() { alert($("input[type='checkbox']:checked").length); alert($("input[type='radio']:checked").length);}); })
13、你是如何将一个 HTML 元素添加到 DOM 树中的? $('123').appendTo('#case'); 把所有匹配的元素追加到指定元素的元素集合中。--加入内容 $('#case').append('1234'); 向每个匹配的元素内部追 加内容
14、JavaScript window.onload 事件和 jQuery ready 函数有何不同? JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。 另一方面,jQuery ready() 函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用。鉴于这个好处,用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。
15、$(document).ready() 是个什么函数?为什么要用它? ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载(例如HTML被完全解析DOM树构建完成时),jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器,jQuery帮你解决了跨浏览器的难题。 $(function(){});等同于$(document).ready(function(){//document可省略})
16、each() 方法为每个匹配元素规定要运行的函数。document.onclick = function(){$('li').each(function() {$(this).css('list-style', 'none');});}}上下左右
17、:selected 匹配所有选中的option元素 查找所有选中的选项元素花已选中树$("select option:selected").hide();//隐藏选中选项
$("form input:checked").hide();//隐藏勾选项
18、$(this) 和 this 关键字在 jQuery 中有何不同? $(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等。而 this 代表当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法,直到它被 $() 函数包裹,例如 $(this)。
19、jQuery 库中的 $() 是什么? $() 函数是 jQuery() 函数的别称,函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数,它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。20、网页上有 5 个元素,如何使用 jQuery来选择它们? jQuery 支持不同类型的选择器,例如 ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class,你可以用标签选择器来选择所有的 div 元素。jQuery 代码:$("div"),这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。
21、jQuery 里的 ID 选择器和 class 选择器有何不同? id是唯一的,即使有多个id相同的元素,jquery选择器也只能获取其中一个 。所以:想在jquery中对id设置动作,id在页面中只允许出现一次。 CSS找到元素后添加的是单一样式,而jquery添加的是动作行为。
22、如何在点击一个按钮时使用 jQuery 隐藏/显示一个图片?
$('input').click(function(){$('img').hide(); });
$('input').click(function(){$('img').show(); });
$('input').click(function(){$('img').toggle(); });
23、你如何使用jQuery设置一个属性值? attr() 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。