文档库 最新最全的文档下载
当前位置:文档库 › jquery学习笔记

jquery学习笔记

jquery学习笔记
jquery学习笔记

Jquery 介绍
jQuery 对 js 封装成方法。可以比 JS 实现更多的特效,写更少的代码。 先通过$()得到对象,再调用 jQuery 中定义的方法就可以轻松操作。API 文档中有详细的用 法,一看就会 jquery 对象是数组,直接操作时操作第一个元素
jquery 转成 dom: $("#msg”)[0].innerHTML; $("#msg”).eq(0)[0].innerHTML;
dom 转成 jquery: $(document.getElementById(”msg”))
在哪里写代码
1、在页面中导入 jquery-1.4.1.js,
地方 1:
$(function(){ //在这里写 jquery 代码 1
});
地方 2: $(document).ready(function(){ //防止文档为加载完成就运行
//在这里写 jquery 代码 2 });

事件函数
$(document).ready(function)
当文档完成加载时
$(selector).click(function)
点击事件
$(selector).dblclick(function)
双击事件
$(selector).focus(function)
$("#gl").focus(); var t=$("#gl").val(); $("#gl").val("").focus().val(t);
获得焦点事件
获得焦点,让定界符在内容最 后
$(selector).mouseover(function)
鼠标悬停事件
$(document). blur (function) ,失去焦点 $(document). select (function)选上
$("#test").find('option:selected').text(); 获取下拉框选中 的文 本
$(document).hover(function ); 鼠标移上去
$(document). submit(function)提交
jquery 方法
$(this).hide(1000) 隐藏当前的 HTML 元素。变换时间 1S $("p").show(); 显示元素,变换时间 1S $.trim(" love ");//jquery 去除字符串两端口的空格 $("#select").val("1"); //恢复下拉框默认值 $("#table 的 ID").find("tr").length 获取表格的总行数,查找子元素 $(“#page”).empty();清空 $("p").css("background-color","red"); 改变元素的 css

$("input").eq(0).removeAttr("value");移除 input 标签第一个索引的 value 属性 $(selector).html(“content”) 改变 htm 内容 $("#li"+parentId+" div")[0] 获取下面的一个 div 元素 $("a").appendTo($("#b"));//吧 a 元素剪切到 b 元素里面 $("a").attr('tagName') 获取标签类型 $("#priceUnit").focus(); 非输入框元素。是将页面定位到这个描点 $("#id3>a:first span").html(newname);//获取下面的第一个 a 元素 $("#li"+id).parent() //得到元素的父元素 $(“jquery”).next();//下一个兄弟元素 $(“#jquert”).prev();//上一个兄弟元素 $("a span").toggle() ; //切换元素的可见状态,这个对象也可以是数组哦,全部都反过来 $("#moreinfo").slideToggle();//平滑的从上往下显示出来 $("#li"+id+" a span").html(newname); //嵌套选择的用法 $("a").before(“”),$("a").after:作为兄弟元素添加,之前之后
$("p").unbind( "click" ) 解除事件
$("#reqlist").prepend(""); //添加到第一行 $("#reqlist").append(""); //添加到最后行 $("p").remove() 删除元素 $('a').text()//获得组件的值 $('a').text('hehe');设置组建的值 $('a').val();表单属性的值 $("#bt_updSong").attr("disabled",true); //不可编辑 $("input:radio",this).attr("checked",true);//单选钮选上
if($(".radio-span ").is(':checked')) //是否选上
var klopen=$("input[name=klopen]:checked").val();单选按钮的值 $("#postMsg") 通过 id 获取元素 $("input[name='ht']") 通过 name 获得元素,修改 input 标签就行了

$("p")通过标签获得 $(“.test”)通过 class 属性来获得 $("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景 $("#bt_searchArt").click();让某个按钮被点击 $("p.intro") 选取所有 class="intro" 的

元素。 $("p#demo") 选取 id="demo" 的第一个

元素。
$("p").eq(1) 获取第二个 p 元素
$(“:text”) 选取 input 的的 type=text,其他的也一 $("#msg").addClass("select"); //为元素增加名称为 select 的 class $("#msg").removeClass("select");//删除 class $("#msg").hasClass("select");//判断是否有 class $("#adTable tr:gt(0)").remove();//从表的第二行开始删除 $("p”).trigger(”click”);触发事件
回车和 each 遍历元素、数组、json
回车事件: 方式 1.Input 加上这个回车事件:onkeypress="javascript:if(event.keyCode==13) login();" 方式 2.$("#height").keypress(function(event){//按下回车 enter 键
if(13 == event.keyCode){ $("#bt_searchAlbum").click();
} }); ------------------------------------------------------------------//each 遍历组件的值 callback 可选 callback 的参数也可自选(按顺序)i 下标 n 值 $('li').each(function (i,n){

alert(this.innerHTML); });
//遍历数组 $.each( [0,1,2], function(i, n){
alert(i + ": " + n ); }); //遍历 json $.each( { name: "John", lang: "JS" }, function(i, n){
alert( i + ": " + n ); }); 扫第一个领红包,再扫第二个把刚刚领取的红包用出去。 领到多少我微信发现金给你
AJAX 请求(只有$.ajax 可设置同步加载, 其他都是异步的)
请求 $.getJSON (url,[data],[callback])
描述 使用 HTTP GET 来加载远程 JSON 数据
$.get(url,[data],[callback]) $.post(url,[data],[callback])
使用 HTTP GET 来加载远程数据 使用 HTTP POST 来加载远程数据
$.ajax(options)
把远程数据加载到 XMLHttpRequest 对象中

(url) 被加载的数据的 URL(地址) (data) 发送到服务器的数据的键/值对象 (callback) 当数据被加载时,所执行的函数 (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text) (options) 完整 AJAX 请求的所有键/值对选项
xml html script json jsonp text
Type 可用值 6 种 返回 XML 文档,可用 jQuery 处理。 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。 返回纯文本 JavaScript 代码。不会自动缓存结果。 返回 JSON 数据 JSONP 格式。使用 JSONP 形式调用函数时 返回纯文本字符串
以下是用 jquery 对 ajax 的例子
// $.ajax获取用户状态
$.ajax({ type: "get", async: false,//同步阻塞加载 cache: false,//不缓存 url: "${ctx}/actUser/userStatus.do?actUserId="+actUserId, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) {

if(data.goPage == 1){ window.location.href = "index.jsp?reg=1";
} }, error: function (err) {} }); 返回Json格式
contentType: "application/json; charset=utf-8", dataType: "json",
返回text格式
contentType:"plain/text;utf-8", //备注返回的才是txt dataType:"html"
// getjson获取登录用户状态信息 $.getJSON('actUser/userStatus.do', {actUserId:actUserId}, function(data){ if(data.goPage == 1){ window.location.href = "index.jsp?reg=1"; } });
文本框只能输入数字
方法一:给输入框加入以下属性:
方法2
//选上这以后的单选钮 $("table table").click(function (){
$("input:radio",this).attr("checked",true); });
清除 file 表单的值
var file = $("#fileToUpload") file.after(file.clone().val("")); file.remove();
获得窗口和元素的高度
var obj=$("#addemp")[0]; var ww=$(window).width(); var wh=$(window).height(); var dw=$(obj).width(); var dh=$(obj).height(); //显示在屏幕中央,记得元素要加css:position: fixed; obj.style.top=(wh/2)-(dh/2)+'px'; obj.style.left=(ww/2)-(dw/2)+'px';
拓展 自己写方法
$.fn.background = function(bg){ return this.css('background', bg); };

网上的选择方法大全
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
$("#myELement")
选择 id 值等于 myElement 的元素,id 值不能重复在文
档中只能有一个 id 值是 myElement 所以得到的是唯一的元素
$("div")
选择所有的 div 标签元素,返回 div 元素数组
$(".myClass")
选择使用 myClass 类的 css 的所有元素
$("*")
选择文档中的所有的元素,可以运用多种的
选择方式进行联合选择:例如$("#myELement,div,.myclass")
层叠选择器:
$("form input")
选择所有的 form 元素中的 input 元素
$("#main > *")
选择 id 值为 main 的所有的子元素
$("label + input")
选择所有的 label 元素的下一个 input 元素节点,
经测试选择器返回的是 label 标签后面直接跟一个 input 标签的所有 input 标签
元素
$("#prev ~ div")
同胞选择器,该选择器返回的为 id 为 prev 的
标签元素的所有的属于同一个父元素的 div 标签
基本过滤选择器: $("tr:first") $("tr:last") $("input:not(:checked) + span")
选择所有 tr 元素的第一个 选择所有 tr 元素的最后一个
过滤掉:checked 的选择器的所有的 input 元素
$("tr:even")
选择所有的 tr 元素的第 0,2,
4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从 0 开始)
$("tr:odd") 5... ...个元素 $("td:eq(2)") 个 td 元素 $("td:gt(4)") 元素 $("td:ll(4)") 的 td 元素 $(":header") $("div:animated") 内容过滤选择器:
选择所有的 tr 元素的第 1,3, 选择所有的 td 元素中序号为 2 的那 选择 td 元素中序号大于 4 的所有 td
选择 td 元素中序号小于 4 的所有

$("div:contains('John')") 选择所有 div 中含有 John 文本的元素
$("td:empty")
选择所有的为空(也不包括文本节点)的
td 元素的数组
$("div:has(p)")
选择所有含有 p 标签的 div 元素
$("td:parent")
选择所有的以 td 为父节点的元素数组
可视化过滤选择器:
$("div:hidden") $("div:visible") 属性过滤选择器:
选择所有的被 hidden 的 div 元素 选择所有的可视化的 div 元素
$("div[id]") $("input[name='newsletter']") 'newsletter'的 input 元素
选择所有含有 id 属性的 div 元素 选择所有的 name 属性等于
$("input[name!='newsletter']") 选择所有的 name 属性不等于'newsletter' 的 input 元素
$("input[name^='news']") 开头的 input 元素 $("input[name$='news']") 结尾的 input 元素 $("input[name*='man']") 'news'的 input 元素
选择所有的 name 属性以'news' 选择所有的 name 属性以'news' 选择所有的 name 属性包含
$("input[id][name$='man']")
可以使用多个属性进行联合选择,该选择
器是得到所有的含有 id 属性并且那么属性以 man 结尾的元素
子元素过滤选择器:
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") 子节点的数组 $("div span:last-child") 一个节点的数组 $("div button:only-child") 节点的所有子节点的数组
返回所有的 div 元素的第一个 返回所有的 div 元素的最后
返回所有的 div 中只有唯一一个子
表单元素选择器:

$(":input") 包括 input, textarea, select 和 button
选择所有的表单输入元素,
$(":text") input 元素 $(":password") $(":radio") 元素 $(":checkbox") $(":submit") $(":image") $(":reset") 元素 $(":button") $(":file") input 元素 $(":hidden") 元素或表单的隐藏域
选择所有的 text
选择所有的 password input 元素 选择所有的 radio input
选择所有的 checkbox input 元素 选择所有的 submit input 元素 选择所有的 image input 元素 选择所有的 reset input
选择所有的 button input 元素 选择所有的 file
选择所有类型为 hidden 的 input
表单元素过滤选择器:
$(":enabled")
选择所有的可操作的表单元素
$(":disabled")
选择所有的不可操作的表单元素
$(":checked")
选择所有的被 checked 的表单元素
$("select option:selected") 选择所有的 select 的子元素中被 selected 的
元素

超完整JQUERY面试题及答案

一、Jquery测试题 下面哪种不是jquery的选择器?(单选) A、基本选择器 B、后代选择器 C、类选择器 D、进一步选择器 考点:jquery的选择器(C) 当DOM加载完成后要执行的函数,下面哪个是正确的?(单选) jQuery(expression,[context])B、jQuery(html,[ownerDocument])C、jQuery(callback)D、jQuery(elements) 考点:jquery的核心函数(C) 下面哪一个是用来追加到指定元素的末尾的?(单选) A、insertAfter() B、append() C、appendTo() D、after() 考点:jquery的核心函数(C) 下面哪一个不是jquery对象访问的方法?(单选) A、each(callback) B、size() C、index(subject) D、index() 考点:jquery的核心函数之对象访问(D) jquery访问对象中的size()方法的返回值和jQuery对象的_______属性一样. 考点:jquery的核心函数之对象访问(length) jquery中$(this).get(0)的写法和__________是等价的。 考点:jquery的核心函数之对象访问($(this)[0]) 7.有这样一个表单元素 ,想要找到这个hidden元素,下面哪个是正确的?(单选) A、visible B、hidden C、visible() D、hidden() 考点:jquery的选择器(B) 如果需要匹配包含文本的元素,用下面哪种来实现?(单选) A、text() B、contains() C、input() D、attr(name) 考点:jquery的选择器(B) 现有一个表格,如果想要匹配所有行数为偶数的,用________实现,奇数的用_______实现。 考点:jquery的选择器(even,odd) 如果想要找到一个表格的指定行数的元素,用下面哪个方法可以快速找到指定元素?(单选) A、text() B、get() C、eq() D、contents() 考点:jquery的选择器(C) 在一个表单里,想要找到指定元素的第一个元素用_________实现,那么第二个元素用_________实现。考点:jquery的选择器(first,eq(1))

Jquery测试题教学教材

J q u e r y测试题

1、HTML 代码: one

two
three jQuery 代码: $("div > p"); 结果:( A ) A、[ two ] B、[one ] C、[three ] D、[
two
] 2、HTML 代码:
DIV
SPAN P jQuery 代码: $("*") 结果:( D ) A、[
DIV
] B、[SPAN ] C、 [P ] D、[
DIV
, SPAN, P ] 3、HTML 代码:
div class="notMe"
div class="myClass"
span class="myClass" jQuery 代码: $(".myClass"); 结果:( D ) A、[
div class="notMe"
] B、[
div class="myClass"
] C、[span class="myClass"] D、[
div class="myClass"
, span class="myClass" ] 4、HTML 代码:
DIV1
DIV2
SPAN jQuery 代码: $("div"); 结果:( B ) A、[
DIV2
] B、[
DIV1
,
DIV2
] C、[
DIV1
] 5、HTML 代码:
id="notMe"
id="myDiv"
jQuery 代码: $("#myDiv"); 结果:( A ) A、[
id="myDiv"
] B、[id="notMe" ] C、[
id="notMe"
] D、[
id="notMe"
id="myDiv"
] 6、HTML 代码:
div

p class="myClass" span

p class="notMyClass" jQuery 代码: $("div,span,p.myClass") 结果:( A ) A、[

div
,

p class="myClass" , span ] B、[

p class="myClass" ] C、[

p class="notMyClass" ] D、[

div
] 7、HTML 代码:

JavaScript Jquery考试题

JavaScript / Jquery /ajax 测试题 共40题,每题2.5分,满分100 1.以下哪个不是javascript语言的特点:() A. 基于对象 B. 跨平台 C. 编译执行 D. 脚本语言 2.请看下列html代码:

hello 能使文本“hello”字体大小变成40px的jQuery代码是: A.$('div.s1').css('font-size','40px'); B.$( 'p.s1' ) .css ( 'font-size' , '40px' ); C.$('#s1').css('font-size','40px'); D.$('p#s1').css('font-size','40px'); 3. 下述html代码:给第二个

  • 设置字体颜色正确的是:
    • item1
    • item2
    • item3
    A.$( 'ul li:eq( 2 )' ) .cssStyle( 'color' , 'red' ) B.$('ul li:eq( 1 )') .cssStyle( 'color' ,'red') C. $( 'ul li:eq( 2 )' ) .css ( 'color' , 'red' ) D $( 'ul li:eq( 1 )' ) .css ( 'color' , 'red' ) 4、请看下列html代码和jQuery代码片段:
    1002
    1003

    jQuery基础教程第四版 第3章学习笔记

    本文由我司收集整编,推荐下载,如有疑问,请与我司联系 jQuery 基础教程第四版第3 章学习笔记 2017/08/30 114 第3 章 3.1 在页面加载后执行任务 3.1.1 代码执行的时机选择①当文档完全下载到浏览器中时,会触发window.onload 事件,意味着页面上的全部元素对于JavaScript 而言都是可以操作的。②通过(document).ready()注册的事件处理程序,则会在DOM 完全就绪并可以使用时调用。意味着所有元素对 脚本而言都是可以访问的,但是,却不意味着所有关联的文件都已经下载完毕。 3.1.2 基于一个页面执行多个脚本①.onload 属性一次只能保存对一个函数的引用,因此不能在现有的基础上再增加新行为。②每次调用(document).ready()方法时都会向内部的行为队列添加一个新函数,当页面加载完成后,所有的函数都会被执行。而且,这些函数会按照注册他们的顺序依次执行。 3.1.3 .ready()的简写形式①(document).ready()结构,实际上是基于document 这个DOM 元素构建而成的jQuery 对象上调用了.ready()方法。②(document).ready(){ //这里是代码……}); 可以简写成:$(function() { //这里是代码……} 3.1.4 向.ready()回调函数中传入参数 3.2 处理简单的事件 3.2.1 简单的样式转换器①在用户单击按钮时执行,需要引入.on()方法。通过这个方法,可以指定任何DOM 事件,并为该事件添加一 种行为。此时,事件是click。eg: (‘#switcher- large’).on(‘click’,function(){});3.2.2 启用其他按钮3.2.3 利用事件处理程序的上下 文①当触发任何事件处理程序时,关键字this 引用的都是携带相应行为的DOM 元素。通过在事件处理程序中使用(this),可以为相应的元素创建jQuery 对象,然后就如同使用CSS 选择符找到该元素一样对它进行操作。 3.2.4 使用事件上下文进一步减少代码上下文关键字this 引用的是DOM 元素,而不是jQuery 对象,因此可以使用原生的DOM 属性来确定被单击元素的ID。 3.2.5 简写的事件 3.2.6 显示和隐藏高级特性jQuery 的toggleClass()方法,能够根据相应的类是否存在而添加或删除类。 3.3 事件传播 3.3.1 事件的旅程①事件捕获:事件首先会交给最外层的元素,接着再交给更具体的元素。

    jQuery入门教程(很不错)

    jQuery入门[1]-构造函数 https://www.wendangku.net/doc/936763045.html,/archive/2008/03/05/1091816.html jQuery优点 ?体积小(v1.2.3 15kb) ?丰富的DOM选择器(CSS1-3 + XPath) ?跨浏览器(IE6,FF,Safari,Opera) ?链式代码 ?强大的事件、样式支持 ?强大的AJAX功能 ?易于扩展,插件丰富 jQuery的构造函数接收四种类型的参数: jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式(ID,DOM元素名,CSS表达式,XPath表达式)找出文档中的元素,并组装成一个jQuery对象返回。 DEMO: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.wendangku.net/doc/936763045.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd"> jQuery basic title> <style type="text/css"> .selected { background-color:Yellow; } style> <script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript">script> head> <body> <h3>jQuery构造函数h3> <ul> <li>jQuery(expression,context)li> <li>jQuery(html)li> <li>jQuery(elements)li> <li>jQuery(fn)li> ul> <script type="text/javascript"></p><h2>Jquery面试题(修改版)-个人总结</h2><p>单选: 1、下面哪一种不属于Jquery的选择器。(D) A:基本选择器B:层次选择器 C:表单选择器D:节点选择器 2、使用jquery检查<input type="hidden" id="id" name="id" />元素在网页上是否存在。(B) A:if($("#id")) { //do someing... } B: if($("#id").length > 0) { //do someing... } C: if($("#id").length() > 0) { //do someing... } D: if($("#id").size > 0) { //do someing... } 3、<a href="xxx.jpg" title="温家宝出席学校...">新闻</a>,获取<a>元素title的属性值。(C) A:$("a").attr("title").val(); B:$("#a").attr("title"); C:$("a").attr("title"); D:$("a").attr("title").value; 4、执行下面语句 $(document).ready(function(){ $("#click").click(function(){ alert("click one time"); }); $("#click").click(function(){ alert("click two time"); });</p><p>}); 单击按钮<input type="button" id="click" value="点击我"/>,这个会有什么效果。(C) A:弹出一次对话框,显示click one time 。 B:弹出一次对话框,显示click two time 。 C:弹出两次对话框,依次显示click one time,click two time。D:js编译错误。 5、页面中有三个元素,如下:<div>div标签</div><span>span标签</span>p标签 ,如果这三个标签要触发同一个事件,那么正确的写法是(A)。 A:$("div,span,p").click(function(){ //…}); B:$("div || span || p").click(function(){ //…}); C:$("div + span + p").click(function(){ //…}); D:$("div ~ span ~ p").click(function(){ //…}); 6、页面中有一个select标签,代码如下: <select id="sel"> <option value="0">请选择</option> <option value="1">选项一</option> <option value="2">选项二</option> <option value="3">选项三</option> <option value="4">选项四</option> </select>,要使“选项四”选中的正确写法。(B)</p><h2>jquery测试题以及答案</h2><p>1.下面哪种说法是正确的? 您的回答:jQuery是JavaScript库 2.jQuery使用CSS选择器来选取元素? 您的回答:正确 3.jQuery的简写是? 您的回答:$符号 4.通过jQuery,选择器$("div")选取什么元素? 正确答案:所有div元素 5.jQuery是客户端脚本库,还是服务器端脚本库? 您的回答:客户端脚本 6.可以将jQuery与AJAX一起使用吗? 您的回答:Yes 7.jQuery html()方法适用于HTML和XML文档。 您的回答:错误 8.把所有p元素的背景色设置为红色的正确jQuery代码是?您的回答:$("p").css("background-color","red"); 9.通过jQuery,$("div.intro")能够选取的元素是? 正确答案:class="intro"的所有div元素 10.下面哪个jQuery方法用于隐藏被选元素? 您的回答:hide()</p><p>11.下面哪种jQuery方法用于设置被选元素的一个或多个样式属性?正确答案:css() 12.下面哪个jQuery方法用于执行异步HTTP请求? 您的回答:jQuery.ajax() 13.将所有div元素的高度设置为100像素的正确jQuery代码是?您的回答:$("div").height(100) 14.下面哪句话是正确的? 正确答案:如需使用jQuery,您能够引用Google的jQuery库 15.jQuery是通过哪种脚本语言编写的? 您的回答:JavaScript 16.下面哪个jQuery函数用于在文档结束加载之前阻止代码运行? 正确答案:$(document).ready() 17.哪个jQuery方法用于处理命名冲突? 正确答案:noConflict() 18.哪个jQuery方法用于添加或删除被选元素的一个或多个类? 正确答案:toggleClass() 19.$("div#intro .head")选择器选取哪些元素? 正确答案:id="intro"的首个div元素中的class="head"的所有元素 20.jQuery是W3C标准吗? 正确答案:No</p><h2>jQuery学习笔记</h2><p>第一章 一、$(document).ready(function(){ //do something }); 和window.onload的区别 1.前者同一页面可以使用多次,后者出现多次只有最后一次能正确显示 2.前者在DOM模型加载完成后就开始执行,后台在所有元素(包括图片)加载完成 后执行 3.前者可以简化为$(function(){ //do something }); 后者没有简写形式。 二、jQuery比较常使用的是链式操作,比如一个书目导航条: $(function(){ $(“ul”).click(function(){ $(this).addClass(“current”).children(“li”).slideDown().end().sublings().removeClass (“current”).children(“li”).slideUp(); }) }) 对于同一元素不超过3个操作的,一般写同一行,如果操作过多,可以将类似的操纵写成一行,便于阅读。 三、jQuery对象和DOM对象的转换 1.jQuery转化为DOM对象 Var $variable = $(“tr”); //jQuery object Var variable = $variable[0]; //DOM object The transpartent method. DomObject = jQueryObject[index] or = jQueryObject.get(index). 2.DOM Object To jQuery Object Var variable = getElementsByTagName(“tr”); //DOM object Var $variable = $(variable) // jQuery object; The transpartent method. jQueryObject = $(DomObject) 四、jQuery开发工具 1.Dreamweaver 可以安装插件提示jQuery 插件名称:jQuery_API.mxp 2.Aptana 功能非常强大的、开源、专注javascript和Ajax开发IDE; 3.Visual Studio 2008。想要安装插件之后才能提示jQuery</p><h2>jquery考试题(2020年九月整理).doc</h2><p>1.下面哪种不是jquery的选择器?(D) 2.A、基本选择器 B、后代选择器 C、类选择器 D、进一步选择器 3.当DOM加载完成后要执行的函数,下面哪个是正确的?(C) 4.A.jQuery(expression, [context]) B、jQuery(html, [ownerDocument]) C、jQuery(callback) D、jQuery(elements) 5.下面哪一个是用来追加到指定元素的末尾的?() 6.A、insertAfter() B、append() C、appendTo() D、after() 7.下面哪一个不是jquery对象访问的方法?(D) 8.A、each(callback) B、size() C、index(subject) D、index() 9.有这样一个表单元素,想要找到这个hidden元素,下面哪个是正确的?(B) 10.A、visible B、hidden C、visible() D、hidden() 11.如果需要匹配包含文本的元素,用下面哪种来实现?(B) 12.A、text() B、contains() C、input() D、attr(name) 13.如果想要找到一个表格的指定行数的元素,用下面哪个方法可以快速找到指定元素?(C) 14.A、text() B、get() C、eq() D、contents() 15.下面哪种不属于jquery的筛选?(B) 16.A、过滤 B、自动 C、查找 D、串联 17.如果想在一个指定的元素后添加内容,下面哪个是实现该功能的?(D) 18.A、append(content) B、appendTo(content) C、</p><h2>HTML5CSS3实战笔记</h2><p>HTML5+CSS3响应式布局笔记 第一章:HTML5,CSS3响应式布局入门 响应式布局:流式设计,弹性布局... 指针对任一设备对网页内容进行完美布局的一种显示机制。 视口:指浏览器窗口内的内容区域,不包含工具栏,标签栏等。 CSS3是在CSS2基础上按模块构建的,以CSS2.1标准为核心。 实现响应式设计的关键技术是CSS3—媒体查询。 响应式布局的条件:CSS3的媒体查询,流动布局。 原则:让设计在多平台多视口的情况下保留尽可能多的内容,而不是使用display:none隐藏它。 可以通过调整标签的先后顺序来显示大小屏内容顺序问题。 第二章:媒体查询,支持不同的视口 html4中的媒体查询: <link rel=“stylesheet” media=“screen and (orientation:portrait)” href=“xx.css”/> 加载CSS的四种方法:行内,内链,外链,import。其中import会增加css请求,影响速度。@import url(“phone.css”) screen and (max-width: 媒体查询可以检测到如下特性,但最常用的是视口宽度(width)和屏幕宽度(device-width): width:视口宽度。 height:视口高度。 device-width:屏幕宽度。 device-height:屏幕高度。 orientation:检查设备处于横向还是纵向。 aspect-ratio:基于视口宽度和高度的宽高比。如16:9写为aspect-ratio:16/9. device-aspect-ratio:设备屏幕的高宽比。 color:每种颜色的位数。例如min-color:16会检测设备是否拥有16位颜色。 color-index:设备的颜色索引表中的颜色数。值为非负整数。 monochrome:检测单色帧缓冲区中每像素所使用的位数。值为非负整数,比如 monochrome:2。 resolution:用来检测屏幕或打印机的分辨率。如min-resolution:300dpi或 min-resolution:300dpcm。 scan:电视机的扫描方式,值可设为progressive(逐行扫描)或interlace(隔行扫描)。 grid:用来检测输出设备是网格设备还是位图设备。 以上除了scan和grid都可以使用min,max创建一个查询范围。 Respond.js(https://https://www.wendangku.net/doc/936763045.html,/scottjehl/Respond)是为Internet Explorer 8 及更低版本增加媒体查询支持的最快的JavaScript 工具,但它目前无法解析CSS 的@import</p><h2>jquery考试题</h2><p>1.下面哪种不是jquery的选择器(D) 2.A、基本选择器 B、后代选择器 C、类选择器 D、进一步选择器 3.当DOM加载完成后要执行的函数,下面哪个是正确的(C) 4.(expression, [context]) B、jQuery(html, [ownerDocument]) C、jQuery(callback) D、jQuery(elements) 5.下面哪一个是用来追加到指定元素的末尾的() 6.A、insertAfter() B、append() C、appendTo() D、after() 7.下面哪一个不是jquery对象访问的方法(D) 8.A、each(callback) B、size() C、index(subject) D、index() 9.有这样一个表单元素,想要找到这个hidden元素,下面哪个是正确的(B) 10.A、visible B、hidden C、visible() D、hidden() 11.如果需要匹配包含文本的元素,用下面哪种来实现(B) 12.A、text() B、contains() C、input() D、attr(name) 13.如果想要找到一个表格的指定行数的元素,用下面哪个方法可以快速找到指定元素(C) 14.A、text() B、get() C、eq() D、contents() 15.下面哪种不属于jquery的筛选(B) 16.A、过滤 B、自动 C、查找 D、串联 17.如果想在一个指定的元素后添加内容,下面哪个是实现该功能的(D) 18.A、append(content) B、appendTo(content) C、</p><h2>黑马程序员WEB04-JQuery篇笔记</h2><p>第4章WEB04- JQuery篇 1.1使用JQuery完成定时弹出广告:1.1.1需求: 之前使用的JS的方式完成定时弹出广告,现在使用JQuery完成同样的效果: 1.1.2分析 1.1. 2.1技术分析: 【JQuery的概述】 什么是JQuery: JQuery是一个JS的框架(JS的类库).对传统的JS进行了封装. 现在企业的开发中往往不会使用传统的JS进行开发,通常都会使用JS框架进行开发. JS的常用的框架:</p><p>JQuery,ExtJS,DWR,Prototype... JQ的使用: 学习JQuery的语法. 【JQuery的入门】 引入Jquery的js文件. <script src="../../js/jquery-1.11.3.min.js"></script> JQuery的入口函数: // 传统的JS的方式:页面加载的事件只能执行一次. /*window.onload = function(){ alert("aaa"); } window.onload = function(){ alert("bbb"); }*/ // JQuery的方式:相当于页面加载的事件,可以执行多次.效率比window.onload要高. // window.onload 等页面加载完成后执行该方法. // $(function(){}):等页面的DOM树绘制完成后进行执行. // $相当于JQuery $(function(){ alert("aaa"); }); $(function(){ alert("bbb"); }); 【JS对象和JQ对象的转换】 window.onload = function(){ // 传统JS方式: var d1 = document.getElementById("d1"); // JS对象的属性和方法: // d1.innerHTML = "JS对象的属性"; // d1.html("aaaaaa"); // 将JS对象转成JQ的对象. $(d1).html("JS对象转成JQ对象"); } $(function(){ var $d1 = $("#d1"); // $d1.html("JQ对象的属性"); // 转成JS的对象:</p><h2>easyUI学习笔记</h2><p>esayUI 前端开发:企业中java工程师,大多不擅于HTML+CSS 网页布局设计,门户网站(由前端工程师设计),企业内部应用软件(java工程师,选择前端UI框架ExtJS 、Flex 、Easy UI ) ---------------------- Easy UI 学习成本非常低 easyui 最新版本1.3.4,bos开发使用1.3.2版本 ExtJS 2.x 免费,3.x 开始收费 Easy ui 1.2.3版本开始收费 问题:为什么你不用ExtJS ? easy ui 学习成本低,很容易在项目中集成使用,ExtJS 学习成本高昂 EasyUI+tutorial.CHM 官方demo例子 jQuery_EasyUI.doc demo例子 EasyUI-API+1.3.2.chm 中文api jquery.EasyUI-1.3.1+API.chm 英文api jquery-easyui-1.3.2.zip 框架开发包 目录结构分析 demo 示例 locale 国际化信息文件(默认英文提示信息)</p><p>plugins 框架功能js文件 src 源码 themes 主题样式 自带5套主题,icons 图标文件 easyloader.js 核心加载器(加载plugins 功能js) jquery-1.8.0.min.js jquery开发js文件 jquery.easyui.min.js easy ui 框架功能js合集 jquery.easyui.min.js == easyloader.js + plugins/* 1.如何在页面中使用easy ui ? 引入四个文件 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery-1.8.3.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script> 2、学习使用easy ui 布局功能 layout 布局控件使用 将body、div 分成东西南北中,五个部分 <body class="easyui-layout"> <div region="north"style="height: 100px" title="北部面板">北部 </div> <div data-options="region:'south',title:'南部面板'"style="height:</p><h2>EasyUI 学习笔记</h2><p>EasyUI 学习笔记 1.class="easyui-datagrid" 用于列表展示 2.注释:图中有标有绿色字体的是在图片中显示的图片的样式,比如添加,删除,修改,保存,取消。 把jquery easyui下载好之后,一般引用下页几个文件 引入样式代码如下: <link href="https://www.wendangku.net/doc/936763045.html,/Resources/easyui/css/default.css" rel="style sheet" type="text/css" /> <link href="https://www.wendangku.net/doc/936763045.html,/Resources/easyui/js/themes/default/ea syui.css" rel="stylesheet" type="text/css" /> //页面图标样式 <link href="https://www.wendangku.net/doc/936763045.html,/Resources/easyui/js/themes/icon.css" rel="stylesheet" type="text/css" /></p><p><script src="https://www.wendangku.net/doc/936763045.html,/Resources/easyui/js/jquery-1.7.2.min. js" type="text/javascript"></script> //jquery easyui主要的js <script src="https://www.wendangku.net/doc/936763045.html,/Resources/easyui/js/jquery.easyui.mi n.js" type="text/javascript"></script> 列表展示数据 代码如下: <table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px; he ight: 250px" url="https://www.wendangku.net/doc/936763045.html,/GetJson/CreateJson.aspx" toolbar="#t oolbar" pagination="true" rownumbers="true" fitcolumns="true" singleselect="true"> <thead> <tr> <th field="AccountCode" width="50"> 编号 </th> <th field="AccountName" width="50"> 卡名 </th> <th field="AccountPwd" width="50"> 密码</p><h2>MVC,DOM及jQUERY考试题库</h2><p>1.下面关于https://www.wendangku.net/doc/936763045.html,和三层架构的描述正确的是(a )。 A、https://www.wendangku.net/doc/936763045.html, MVC相当于三层中的表现层 B、https://www.wendangku.net/doc/936763045.html, MVC和三层不能结合使用 C、https://www.wendangku.net/doc/936763045.html, MVC相当于三层中的数据访问层 D、https://www.wendangku.net/doc/936763045.html, MVC相当于三层中的业务逻辑层 2.让控件不可见的属性是以下哪一个( d )。 A. Cursor B. Enabled C. Dock D. Visible 3.下面关于cookie描述错误的是哪个( d )。 A、Cookie是一小段文本 B、Cookie可以禁用Cookie C、用户可以自己删除网站的Cookie D、Cookie永远不会销毁 4.下面对MVC模式描述错误的是( d )。 A、强制性的使应用程序的输入,处理和输出分开 B、M和V实现了代码分离,从而是同一个应用程序可以使用不同的表现形式 C、C存在的目的是确保M和V同步 D、MVC三个组件没有什么关系 5.关于类成员访问控制权限正确的是(a ) A、public能被所有类访问 B、protected能被所有类访问 C、private 能被同一文件中的其它类访问 D、internal能被所有类访问 6.如果在配置文件中禁用了Session,Session会在哪里显示(b )。 A、Cookie B、地址栏中 C、隐藏控件 D、不会显示 7.下面关于抽象方法描述正确的是( b )。 A、可以有方法体 B、不能方法体 C、可以出现在非抽象类中 D、抽象类中的方法都是抽象方法 8.关于多态的说法正确的是( a )。 A、虚方法可以实现多态 B、多态就是一个父类可以有多个子类 C、多态与程序的扩展性无关 D、多态不是面向对象的特点 9.下列说法哪个正确( b )。 A、允许一个子类有多个父类 B、某个类是一个类的子类,它仍有可能 成为另一个类的父类 C、一个父类只能有一个子类 D、继承关系最多不能超过4层 10.下面关于缓存的描述正确的是( c )。 A、建议再缓存中放置大量数据 B、在数据改变后缓存无法及时更新 C、可以定时更新缓存 D、缓存不可以和外部文件建立关联 11.关于Jquery和事件链接的说法错误的是( c )。 A、Jquery支持事件链接 B、Jquery只支持两级事件链接 C、Jquery不支持事件链接 D、事件链接可以简化我们的代码 12.Jquery的基本功能不包括(d ) A、访问和操作DOM元素 B、控制页面样式 C、内置大量动画效果 D、具有强大的图标能力 13.选择器“$('#but')”是根据( b )匹配元素的。 A、元素名称 B、元素Id</p><h2>JQuery基础、选择器</h2><p>jQuery入门 什么是jQuery jQuery是一个JavaScript库,通过封装原生的JavaScript函数得到一整套定义好的方法。它是JohnResig于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。以最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。 主旨:以更少的代码、实现更多的功能(write less ,do more!) 官网:https://www.wendangku.net/doc/936763045.html,/ jQuery的功能和优势 jQuery作为JavaScript封装的库,它的目的就是为了简化开发者使用JavaScript。主要功能有以下几点: 像CSS那样访问和操作DOM; 修改CSS控制页面外观; 简化JavaScript代码操作; 事件处理更加容易; 各种动画效果使用方便; 让Ajax技术更加完美; 基于jQuery大量插件; 自行扩展功能插件。 jQuery最大的优势,就是特别的方便。比如模仿CSS获取DOM,比原生的JavaScript</p><p>要方便太多。并且在多个CSS设置上的集中处理非常舒服,而最常用的CSS功能又封装到单独的方法。 最重要的是jQuery的代码兼容性非常好,你不需要总是头疼着考虑不同浏览器的兼容问题。 其他JavaScript库 目前除了jQuery,还有5个JS库较为流行,他们分别是YUI、Prototype、Mootools、Dojo和ExtJS。 YUI,是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。 Prototype,是最早成型的JavaScript库之一,对JavaScript内置对象做了大量的扩展。 Dojo,Dojo强大之处在于提供了其他库没有的功能。离线存储、图标组件等等。 Mootools,轻量、简洁、模块化和面向对象的JavaScript框架。 ExtJS,简称Ext,原本是对YUI的一个扩展,主要创建前端用户界面。(付费的) jQuery代码的编写 配置jQuery环境 1、获取jQuery最新版本 从官网下载:https://www.wendangku.net/doc/936763045.html,/ 3、jQuery环境配置 jQuery不需要安装,把下载的jQuery.js放到网站上的一个公共位置,想要在某个页面上使用jQuery时,只需在该HTML文档中引入该库文件即可。 4、在页面中引入jQuery 由于jQuery是JavaScript的一个库文件,也就是jQuery本质是一个.js文件,所以使用<script type=”text/javascript” src=”jQuery存放的路径”></script>引入。 简单的jQuery示例</p><h2>常见WEB安全漏洞及整改建议</h2><p>常见WEB安全漏洞及整改建议 1. HTML表单没有CSRF保护 1.1 问题描述: CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSRF/XSRF。 CSRF攻击:攻击者盗用了你的身份,以你的名义发送恶意请求。CSRF能够做的事情包括:以你名义发送邮件,发消息,盗取你的账号,甚至于购买商品,虚拟货币转账……造成的问题包括:个人隐私泄露以及财产安全。 1.2 整改建议: CSRF的防御可以从服务端和客户端两方面着手,防御效果是从服务端着手效果比较好,现在一般的CSRF防御也都在服务端进行。有以下三种方法: (1).Cookie Hashing(所有表单都包含同一个伪随机值): (2).验证码 (3).One-Time Tokens(不同的表单包含一个不同的伪随机值) 1.3 案例: 1.服务端进行CSRF防御 服务端的CSRF方式方法很多样,但总的思想都是一致的,就是在客户端页面增加伪随机数。 1.3.1 Cookie Hashing(所有表单都包含同一个伪随机值): 这可能是最简单的解决方案了,因为攻击者不能获得第三方的Cookie(理论上),所以表单中的数据也就构造失败.</p><p>//构造加密的Cookie信息 $value = “DefenseSCRF”; setcookie(”cookie”, $value, time()+3600); ?> 在表单里增加Hash值,以认证这确实是用户发送的请求。 $hash = md5($_COOKIE['cookie']); ?> ”> 然后在服务器端进行Hash值验证 if(isset($_POST['check'])) { $hash = md5($_COOKIE['cookie']); if($_POST['check'] == $hash) { doJob(); } else {</p><h2>jquery考试题</h2><p>1.下面哪种不是j q u e r y的选择器?(D) A、基本选择器 B、后代选择器 C、类选择器 D、进一步选择器 2.当D O M加载完成后要执行的函数,下面哪个是正确的?(C) A.j Q u e r y(e x p r e s s i o n,[c o n t e x t]) B、j Q u e r y(h t m l,[o w n e r D o c u m e n t]) C、j Q u e r y(c a l l b a c k) D、j Q u e r y(e l e m e n t s) 3.下面哪一个是用来追加到指定元素的末尾的?() A、i n s e r t A f t e r() B、a p p e n d() C、 a p p e n d T o()D、a f t e r() 4.下面哪一个不是j q u e r y对象访问的方法?(D) A、e a c h(c a l l b a c k) B、s i z e() C、 i n d e x(s u b j e c t)D、i n d e x() 5.有这样一个表单元素,想要找到这个h i d d e n元素,下面哪个是正确的?(B) A、v i s i b l e B、h i d d e n C、v i s i b l e() D、h i d d e n() 6.如果需要匹配包含文本的元素,用下面哪种来实现?(B) A、t e x t() B、c o n t a i n s() C、i n p u t() D、a t t r(n a m e) 7.如果想要找到一个表格的指定行数的元素,用下面哪个方法可以快速找到指定元素?(C)</p></div> </div> <div> <div>相关文档</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="12698152"><a href="/topic/12698152/" target="_blank">jquery考试</a></li> <li id="4367237"><a href="/topic/4367237/" target="_blank">jquery考试题</a></li> <li id="16088409"><a href="/topic/16088409/" target="_blank">jquery笔记</a></li> <li id="21909856"><a href="/topic/21909856/" target="_blank">jquery基础</a></li> </ul> </div> </div> </div> </div> <div class="category"> <span class="navname">相关文档</span> <ul class="lista"> <li><a href="/doc/7513845411.html" target="_blank">JavaScriptJquery考试题课案</a></li> <li><a href="/doc/a01145394.html" target="_blank">2016_MVC+Jquery_考试题库</a></li> <li><a href="/doc/b717434617.html" target="_blank">jQuery题库</a></li> <li><a href="/doc/2c5938406.html" target="_blank">JavaScript Jquery考试题</a></li> <li><a href="/doc/e5772287.html" target="_blank">jquery测试题以及答案</a></li> <li><a href="/doc/585644837.html" target="_blank">JAVASCRIPT JQUERY考试题</a></li> <li><a href="/doc/869818318.html" target="_blank">精选jQuery试题及答案</a></li> <li><a href="/doc/b57833638.html" target="_blank">《JAVASCRIPT与JQUERY应用》期末复习模拟试卷</a></li> <li><a href="/doc/cb16841630.html" target="_blank">jquery考试题</a></li> <li><a href="/doc/3d5673437.html" target="_blank">jquery考试题</a></li> <li><a href="/doc/fa6489348.html" target="_blank">jquery考试题</a></li> <li><a href="/doc/7612716536.html" target="_blank">jquery考试题复习课程</a></li> <li><a href="/doc/8a17889446.html" target="_blank">JavaScript Jquery考试题</a></li> <li><a href="/doc/bf12138453.html" target="_blank">jquery考试题.doc</a></li> <li><a href="/doc/157279025.html" target="_blank">Jquery测试题教学教材</a></li> <li><a href="/doc/db16880281.html" target="_blank">JQuery练习题</a></li> <li><a href="/doc/457103898.html" target="_blank">MVC,DOM及jQUERY考试题库</a></li> <li><a href="/doc/836345921.html" target="_blank">JavaScriptJquery考试题</a></li> <li><a href="/doc/b3996456.html" target="_blank">jquery试题与答案</a></li> <li><a href="/doc/c98603126.html" target="_blank">jquery测试题以及答案</a></li> </ul> <span class="navname">最新文档</span> <ul class="lista"> <li><a href="/doc/0719509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0e19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9319184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/db19211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/af19240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9919184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8b19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8019195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7a19336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6719035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6a19035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4d19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3a19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2519396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2419396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1f19338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/ef19066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/bc19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "959fd23e356baf1ffc4ffe4733687e21af45ff08"; </script> <div class="footer"> <p><a href="/tousu.html" target="_blank">侵权投诉</a>  © 2013-2023 www.wendangku.net  <a href="/sitemap.html">站点地图</a> | <a href="https://m.wendangku.net">手机版</a></p> <p><a href="https://beian.miit.gov.cn" target="_blank">闽ICP备11023808号-7</a>  本站文档均来自互联网及网友上传分享,本站只负责收集和整理,有任何问题可通过上访投诉通道进行反馈</p> </div> <script type="text/javascript">foot();</script> </div> </body> </html>