首页 > 代码库 > jquery练习笔记
jquery练习笔记
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> #pannel { position:relative; width:100px; height:100px; border:1px solid #0050d0; background:#96e555; cursor:pointer; } </style> <script type="text/javascript" src="../Packages/jQuery.1.8.3/jquery-1.8.3.min.js"></script> <script type="text/javascript"> //选择器总结 //jquery中选择器编写均可以以元素名为开头 后跟id,class或则属性选择器来组成。 //$("input[name$=‘3‘]") input为元素名,[]中包含属性name,name的值以3结尾 //$("input#none5") 不能有空格 //$("input.cls1") 不能有空格 //$("input:first") //$("input[class][name^=‘none‘]") 复合选择器，返回含有class属性且name属性的值以none值开头 //$("input.cls1[name^=‘none‘]") 返回class为.cls1且name属性的值以none值开头 //form所有后代input元素 var Init1 = function () { $("form input").each(function () { alert($(this).attr("name")); }) }; //form所有input子元素 var Init2 = function () { $("form > input").each(function () { alert($(this).attr("name")); }) }; //紧接form后的所有input同辈元素 var Init3 = function () { $("form ~ input").each(function () { alert($(this).attr("name")); }) //$("input[name=‘none2‘] ~ input").each(function () { // alert($(this).attr("name")); //}) }; //紧接form的第一个input同辈元素 var Init4 = function () { $("form + input").each(function () { alert($(this).attr("name")); }) }; //返回属性name包含none的所有input元素 var Init5 = function () { $("input[name*=‘none‘]").each(function () { alert($(this).attr("name")); }) } //返回class为cls1的所有input元素 var Init6 = function () { //alert($("input.cls1").attr("name")); $("input.cls1").each(function () { alert($(this).attr("name")); }) } //返回id为none5的所有input元素 var Init7 = function () { //alert($("input.cls1").attr("name")); $("input#none5").each(function () { alert($(this).attr("name")); }) } //返回第一个input元素 var Init8 = function () { $("input:first").each(function () { alert($(this).attr("name")); }) } //返回第一个input元素 var Init9 = function () { //$("input[class][name^=‘none‘]").each(function () { // alert($(this).attr("name")); //}) $("input.cls1[name^=‘none‘]").each(function () { alert($(this).attr("name")); }) } //$(Init9); var GetDom = function (id) { //alert($("#none7").val()); var $id = $("#" + id); alert($id); alert($id.get(0)); alert($id.val()); } //此处如果直接调用GetDom("none7")，$id.val()值为undefined //因为$()时，dom元素只是绘制完成，但未加载完成 //$(GetDom("none7")); //jquery对象与dom对象间的转换 //jquery转dom var $none7=$("#none7");var none7=$none7[0];或 var none7=$none7.get(0); //dom转jquery var none7=document.getElementById("none7"); var $none7=$(none7); //与$(GetDom("none7"));对应， //将方法调用加载到按钮点击事件上，点击可成功获取数据 $(function () { $("#Button1").bind("click", function () { GetDom("none7"); }); }) $(function () { var $cr = $("#cr"); $cr.click(function () { if ($cr.is(":checked")) { alert("恭喜！请继续下一步操作"); } else { alert("请阅读规章制度！"); } }) }) //让渡变量$的控制权 //jQuery.noConflict(); //(function ($) { // $(function () { // //$("#Button2").click(function () { // // alert("让渡测试"); // //}) // alert("让渡测试"); // }); //})(jQuery); //判断一个元素是否存在 //两种方式 if ($("#none7").length > 0) { } if ($("#none7")[0]) { } //基本选择器 #id \ .class \ element \ * \ selector1,selector2... //层次选择器 $(ancestor descendant) ancestor所有后代descendant元素 //$("parent>child") //$("prev+next") 等同于方法$("prev").next("next") 获取后一个元素 //$("prev~siblings") 等同于$("prev").nextAll("siblings") 获取prev后所有兄弟元素 //$("doc").siblings()方法是获取所有同辈元素，跟位置无关 //过滤选择器 //子元素过滤选择器nth-child(index/odd/even/equation),其中index是从1开始的。 //eq(index),index是从0开始的 //$(html) 根据传入的html标记字符串，创建一个dom对象，并将dom对象包装为jquery对象返回。 //含创建元素、文本、属性节点 //var $li1=$("<li>香蕉</li>");$("ul").append($li1); //插入节点 //append() 向每个匹配的元素内追加内容 //prepend() 向每个匹配的元素内前置内容 //appendTo() 将所有匹配的元素追加到指定的元素内 //prependTo() //after() 每个匹配的元素后插入内容。 <p>我爱你</p> $(‘p‘).after(‘<b>你好！</b>‘) 结果是 <p>我爱你</p><b>你好！</b> //insertAfter() 将所有匹配的元素插入到指定元素后面。 <p>我爱你</p> $(‘<b>你好！</b>‘).insertAfter(‘p‘) 结果是 <p>我爱你</p><b>你好！</b> //before() //insertBefore() //删除节点 //remove() 将匹配的元素及其子元素一起删除，返回的是已被删除的节点引用，删除后可再次使用 //empty() 清空元素中所有后代节点，可用于清空内容 //替换节点 //replaceWith() 将所有匹配的元素替换成指定的dom或html //replaceAll() 用指定dom或html替换后面括号里的元素，与replaceWith相反 $(function () { //$(‘p‘).replaceWith("<strong title=‘你喜欢的水果‘>你喜欢的水果是?</strong>");//将$(‘p‘)替换为后面的内容 $("<strong title=‘你喜欢的水果‘>你喜欢的水果是?</strong>").replaceAll(‘p‘);//用前面的内容替换$(‘p‘) }) //克隆 $(function () { $("ul li").click(function () { //$(this).clone().appendTo($(‘ul‘)); $(this).clone().appendTo(‘ul‘);//克隆点击li并追加到ul内尾 $(this).clone(true).appendTo(‘ul‘);//clone(true)复制元素的同时也复制元素所绑定事件 }) }) //包裹节点 $(function () { //$("strong").wrap("<b></b>");//将每个stong用<b>包裹 //$("strong").wrapAll("<b></b>");//将strong组合并用<b>包裹,中间的元素依次提取靠后 $("strong").wrapInner("<b></b>");//将strong子元素或内容用<b>包裹 }) //addClass() //removeClass() //toggle() //toggleClass() //hasClass() //css() 有单位 //元素的高度获取 //css("height")获取的高度与样式设置有关，有可能为‘anto’。获取的高度包含px $(‘p‘).css("color",red); $(‘p‘).css("fontSize","10px")采用骆驼写法，尽量用引号 //height()方法获取的是元素实际高度，与样式设置无关。不含px单位 //$(‘p‘).is(‘:visible‘) p元素是否显示 //jquery自定义方法ready(),hover(),toggle() //hover(enter,leave)模拟光标悬停事件,光标移到元素上触发enter，移除触发leave //hover(enter,leave)是用于替换bind("mouseenter")和bind("mouseleave"),不是用于替换bind("mouseover")和bind("mouseout") //toggle(fn1,fn2,...,fnN)模拟鼠标连续点击事件 //toggle()还能切换元素的可见状态。$(this).toggle(); ////x = 0; ////y = 0; ////$(document).ready(function () { //// $("div.over").hover( //// function () { $(".over span").text(x += 1); }, //// function () {$(".enter span").text(y += 1);} //// ) ////}); //获取事件对象 //$(p).bind("click",function(event){});//event就是事件对象 //event只有处理函数可以访问，当事件处理函数执行完后，就会被销毁 //事件冒泡 //停止事件冒泡 event.stopPropagation() //$(p).bind("click",function(event){//函数内容;event.stopPropagation();}); //阻止元素的默认行为 event.preventDefault() //例如超链接有默认跳转事件，提交按钮会提交表单等 //验证表单内容可用到 //$(function () { // $("#sub").bind("click", function (event) { // var username = $("#username").val(); // if (username == "") // { // //处理说明 // //... // event.preventDefault();//阻止表单提交 // } // }) //}) //如果同时想对事件对象停止冒泡和阻止默认行为可适用 return false; //jquery不支持事件捕获，事件捕获是从上到下 //事件对象属性 //event.type() 获取事件类型 //event.stopPropagation() 停止冒泡 //event.preventDefault() 阻止默认行为 //event.target() 获取触发事件元素 event.target.href 连接地址 //event.relatedTarget() 获取相关元素 //event.pageX()//event.pageY() 获取光标相对页面的x和y坐标 //event.which() 鼠标单机事件中获取左中右键,在键盘中获取键盘的按键 //event.metaKey() 键盘事件中获取ctrl按键 //event.originalEvent() 指向原始的事件对象 //移除事件 //可以为同一元素绑定多个事件，也可以为多个元素绑定同一个事件 bind() //unbind([type],[,data]) 移除事件绑定 //$(‘p‘).unbind(); //移除所有绑定 //$(‘p‘).unbind("click");//移除click事件 //$(‘p‘).unbind("click",fun1);//移除click的事件方法fun1 //one() 使用方式和bind()一致 //用于只绑定一次的事件，当处理函数被执行一次后将移除 //模拟操作 //$(‘p‘).trigger("click");模拟点击事件 简化写法$(‘p‘).click(); //trigger()不仅可以触发浏览器支持的事件，也能触发自定义事件 //trigger(type,[,data]) 第二个用于传递参数 //bind()可以绑定自定义事件 //$(function () { // $("#sub").bind("Myclick", function (event, msg1, msg2) { // alert(msg1 + msg2); // }) // $("#sub").trigger("Myclick", ["我的自定义", "事件"]); //}) //trigger()会触发浏览器的默认操作，如果只触发事件 不触发默认操作可用triggerHandler() //triggerHandler("focus") 只触发focus中的事件方法，不会获得焦点 //jquery中的动画 //$("elment").hide(); 等价于 $("elment").css("display","none"); //jquery的动画效果应放在标准模式下，不然可能会引起动画抖动 //hide()和show() 同时改变元素的高宽度和透明度 //fadeIn()和fadeOut()改变元素的透明度，淡入淡出 //fadeIn() //fadeOut() 在一定时间内 降低元素的透明度，直至消失 //slideUp()与slideDown()改变的是元素的高度 //slideUp() 元素由下至上缩短隐藏 //slideDown() 元素由上至下延伸显示 //自定义动画animate(params,speed,callback) $(function () { $(this).css("opacity", 0.5);//设置不透明度 $("#pannel").bind("click", function () { //$(this).animate({ left: "500px" }, 3000);//向右移动500px //$(this).animate({ left: "+=500px" }, 3000);//+=表示在当前位置累加 //$(this).animate({ left: "500px",height:"200px" }, 3000);//+=表示在当前位置累加 //动画先后顺序，写成多个animate即可 //$(this).animate({ left: "500px", height: "200px", opacity: 1 }, 3000)//向右逸动500的同时高度逐渐变为200 并设置不透明度为100% // .animate({ top: "200px", width: "200px" }, 3000) // .fadeOut("slow"); //执行一系列动作后，改变css样式，写字最后一个动画的回调方法中. //这样就将css加入到了动画的队列中 $(this).animate({ left: "500px", height: "200px", opacity: 1 }, 3000)//向右逸动500的同时高度逐渐变为200 并设置不透明度为100% .animate({ top: "200px", width: "200px" }, 3000, function () { $(this).css("border", "5px solid blue"); }); }) //stop([clealQuene][,gotoEnd]) //clealQuene设为true，把当前元素尚未执行完的动画序列清空 //gotoEnd设为true，让正在执行的动画直接到达结束时的状态 $("#pannel").hover(function () { $(this).stop()//停止当前动画，进入下一个动画序列 .animate({ left: "500px", height: "200px", opacity: 1 }, 3000); }, function () { $(this).stop(true) .animate({ top: "200px", width: "200px" }, 3000); } ) //判断元素是否处于动画状态 //$("#pannel").is(":animated") //其他动画方法 //toggle()切换元素的可见状态 //slideToggle()通过高度切换元素的可见性 //fadeTo() 设置匹配元素的不透明度，高宽度不会发生变化 //Javascript Math ceil()、floor()、round()三个函数的区别 //Math.ceil(12.2) 向上取整 //Math.floor(12.2) 向下取整 //Math.round(12.2) 四舍五入 //scrollTop:"50px" 控制滚动条 //表单验证 //表单中必填元素的验证，采用blur(function(){}).光标移除时触发 //要做到即时验证，可为表单元素绑定keyup()和focus()事件 $("form :input").blur(function () { //失去焦点 验证处理 //多条件分支判断 }).keyup(function () {//键盘松开时触发 $(this).triggerHandler("blur"); }).focus(function () {//获取焦点时触发 $(this).triggerHandler("blur");//triggerHandler()只触发元素事件，不触发元素默认事件方法 }) }) //filter() 筛选出与指定表达式匹配的元素集合 //$(‘p‘).filter(‘.selected‘);//筛选出含有selected样式的p元素 //has() 保留包含特定后代的元素 //<ul> // <li>list item 1</li> // <li>list item 2 // <ul> // <li>list item 2-a</li> // <li>list item 2-b</li> // </ul> // </li> // <li>list item 3</li> // <li>list item 4</li> //</ul> //jQuery 代码: $(‘li‘).has(‘ul‘).css(‘background-color‘, ‘red‘);//将包含ul的li背景色改为红色 //hasClass() 检查当前元素是否含有特定的类 //$(this)["removeClass"]("selected") 等价于 $(this).removeClass("selected") //var thisEle=$(""#paras).css("font-size");//获取id为paras的字体大小 //var textFontSize=parseFloat(thisEle,10);//去掉字体的单位 //var unit=thisEle.slice(-2)//获取字体的单位 //index() 搜索匹配元素，并返回相应元素的索引值，从0开始 //jquery的cookie插件运用 //jquery的ajax. load(url [,data] [,callback]) //$("#divT").load("test.html") //$("#divT").load("test.html .para")//加载test页面中样式为para的元素至divT中。para为URL参数 //load()中 若无data参数采用get方式传输，若有data参数采用post方式传输 //load() 回调函数callback 请求完成后，无论是否成功都会被调用 //load() 回调函数callback有三个参数 //$("#divT").load("test.html", function (responseText,textStatus,XMLHttpRequest) { // //responseText 请求返回的内容 // //textStatus 请求状态：success,erro,notmodified,timeout4种 // //XMLHttpRequest XMLHttpRequest对象 //}) //$.get(url [,data] [,callback] [,type]) //callback在请求成功后才会触发与load()不一样 //type 请求返回内容的格式 //$(selector).serialize() // //serialize() 通过序列化表单值，创建 URL 编码文本字符串。包含自动编码 //serializeArray() 将dom元素序列化后，返回json格式 //表单元素必须使用name属性，才会被序列化到字符串中 //$.param() 用于对一个数组或对象按key/value进行序列化 //var obj = { a: 1, b: 2, c: 3 }; //var objstr = $.param(obj); //alert(objstr);//a=1&b=2&c=3 //ajax全局事件方法。只要ajax请求发生，就会触发 //ajaxStart(callback) ajax请求开始时触发 //ajaxStop(callback) ajax请求结束时触发 //ajaxComplete(callback) 完成时 //ajaxError(callback) 发生错误时执行的函数，捕捉的错误最后一个参数传递 //ajaxSend(callback) 请求发送前执行 //ajaxSuccess(callback) 请求成功时触发 //ajaxStart(callback)示例 loading为div 内容为加载中... //$("#loading").ajaxStart(function () { // $(this).show(); //}); //$("#loading").ajaxStop(function () { // $(this).hide(); //}) //使某个ajax请求不受全局方法影响。可将global设置为false //$.ajax({ // url: "test.html", // global:false //不触发全局事件 //}) //html lable的for属性规定与那个表单元素绑定. //for="element_id" element_id为label 要绑定的元素的 id。 //当点击lable（male或female），绑定的单选按钮被选中 //<form> // <label for="male">Male</label> // <input type="radio" name="sex" id="male" /> // <br /> // <label for="female">Female</label> // <input type="radio" name="sex" id="female" /> //</form> //可以运用验证插件，cookie插件 //jQuery.extend() 可以用传入的参数覆盖默认值 //jquery的插件this是指jquery对象 //封装jquery对象方法的插件 ; (function ($) { $.fn.extend({ "color": function (value) { }, "border": function (value) { }, "backgroud": function (value) { } }) })(jQuery) //封装全局函数插件 ; (function ($) { $.extend({ ltrim: function (text) { return (text || "").replace(/^\s+/g, ""); //(text||"")用于防止传入尽量的text这个字符串变量处于未定义状态 //如果text为undefined,则返回"" 否则返回text }, rtrim: function (text) { return (text || "").replace(/\s+$/g, ""); } }); })(jQuery); $("#trimTest").val( jQuery.trim(" text ") + "\n" + jQuery.ltrim(" text ") + "\n" + jQuery.rtrim(" text ")//自定义全局函数插件的使用 ); </script> </head> <body> <input name="none2" /> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input class="cls1" name="none" /> <input class="cls1" name="none5" /> <input id="none6" class="cls1" name="none6" /> <input name="none3" /> <input id="none7" type="text" value="none7" name="none7"/> <input id="Button1" type="button" value="button" /><br /> <input type="checkbox" id="cr" /><label for="cr" >我已阅读制度</label> <input id="Button2" type="button" value="button" /><br /> <ul> <li>菠萝</li> <li>雪梨</li> <li>苹果</li> <li>香蕉</li> </ul> <p title="你喜欢的水果"><strong>你喜欢的水果是?</strong></p> <input name="none8" value="dddd" /> <strong title=‘你喜欢的水果‘>你喜欢的水果是?</strong> <div>分隔</div> <strong title=‘你喜欢的水果‘>你喜欢的水果是?</strong> <div id="pannel"></div> </body> </html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。