JQuery快速入门

Write less, do more, I like jQuery.

公司主营业务：成都网站设计、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出浦城免费做网站回馈大家。

JQuery快速入门

jQuery是最常用的js库，整体来说非常轻量并易于扩展，对于移动应用可以使用其更轻量的孪生兄弟Zepto代替。其是由John Resig于2006创建的开源项目，极大的简化了javascript开发人员遍历HTML文档、操作DOM、处理事件、开发Ajax等操作，最有特色的形式是$(document).ready(function() {});其省略形式为：$(function() {});。

在使用jQuery时，需要注意jQuery对象和DOM对象的区别，通常对于jQuery对象，会在变量前加$，如var $variable=jQuery对象;。可以通过如下方式对两者进行转化。

jQuery对象转化为DOM对象: var $cr = $('#cr');var cr = $cr[0];

DOM对象转化为jQuery对象: var cr = document.getElementById('cr');var $cr = $(cr);

此外，在使用多个不同的javascript库时，有可能会出现库之间的冲突，可以通过如下方式解决。

JQuery快速入门

jQuery.noConflict();
jQuery(function() {
jQuery('p').click(function() {
alert(jQuery(this).text());});});//推荐下面的方式var $j = jQuery.noConflict();
$j(function() {});

JQuery快速入门

在介绍jQuery选择器之前，首先引入CSS选择器，如下表所示。

选择器类型	示例
标签选择器	td{}
ID选择器	#note{}
类选择器	div.classname{}
群组选择器	其实就是选择器的组合 td,p,div,a{}
后代选择器	#links a{}
通配选择器	*{}
其他选择器	伪类选择器、子选择器、临近选择器和属性选择器

那么相应的jQuery也会提供对应的选择器，并增加部分自定义的选择器用于方便操作，主要包括基本选择器、层次选择器、过滤选择器、表单选择器等4类选择器。

jQuery选择器	示例
基本选择器
#id, .class, element	最基本的id,类,元素选择器
*	匹配所有元素, $("*")
selector1,selector2,…	将每一个选择器匹配到元素合并后一起返回
层次选择器
$("ancestor descendant")	$('div span')选取里所有的元素
$("parent>child")	$('div>span')选取元素下的子元素
$("prev+next")	$('.one+div')选取class为one的下一个元素
$("prev~siblings")	$('#two~div')选取id为two的元素后面所有兄弟元素
过滤选择器
:first, :last	选择第一个/最后一个元素
:not(selector)	去除所有与给定选择器匹配的元素
:even, :odd	选取索引为偶数/奇数所有的元素，初始索引为0开始
:eq(index),gt(index),:lt(index)	选取索引等于/大于/小于index的元素
:header	选取所有标题元素
:animated	选取当前正在执行动画的元素
:contains(text)	选取含有文本内容的为text的元素
:empty	选取不包含子元素或者文本的空元素
:has(selector)	选取含有选择器所匹配元素的元素
:parent	选取含有子元素或者文本的元素
表单选择器
:input	获取所有,,<select>和<button>元素</td></tr><tr><td>:text,:password,:hidden</td><td>获取所有单行文本框/密码框/不可见元素</td></tr><tr><td>:radio, :checkbox</td><td>获取所有单选框/多选框</td></tr><tr><td>:submit,:reset,:button</td><td>选取单选按钮、多选按钮、任意按钮</td></tr><tr><td>:p_w_picpath, :file</td><td>选取所有图像按钮，所有上传域</td></tr></tbody></table><p>Tip：html元素的id包含#，（，]等特殊字符时，需要通过//进行转义，例如：<div id='id[1]'></div>， $('#id<strong>\\</strong>[1\\]') //转义特殊字符</p><p> </p><p><strong>DOM</strong>(Document Object Modal)文档对象模型是一种与浏览器、平台、语言无关的接口，通过该接口可以轻松的访问浏览器中所有标准组件。一般来说，DOM操作可以分为3类：DOM Core，包含getElementById(),getAttribute()等方法；HTML_DOM，例如document.forms,element.src;CSS_DOM,例如element.style.color，对于jQuery来说，将会用更简洁的方式实现这部分功能，如下表所示。</p><table><colgroup><col /><col /></colgroup><tbody valign="top"><tr><td><strong>DOM操作</strong></td><td><strong>示例</strong></td></tr><tr><td>查找结点</td><td>获取元素结点：var $li = $('ul li:eq(1)'); 获取属性结点：var p_txt = $li.<strong>attr</strong>('name');</td></tr><tr><td>创建结点</td><td>jQuery工厂方法:$(html语句); var $li_1 = $('<li></li>');$('ul').<strong>append</strong>('$li_1'); 文本结点和属性结点于此类似</td></tr><tr><td>插入结点</td><td>插入结点的方式很多： append(), appendTo(), prepend(),prependTo(),添加到内部 after(), insertAfter(),before(),insertBefore()</td></tr><tr><td>删除结点</td><td><strong>删除节点</strong>：$('ul li:eq(1)').<strong>remove</strong>(); <strong>清空结点</strong>，即清空结点中的内容(子节点) $('ul li:eq(1)').empty();</td></tr><tr><td>复制结点</td><td>$('#xionger').click(function(){$(this).<strong>clone</strong>().appendTo('ul'); });</td></tr><tr><td>替换结点</td><td>$('p').<strong>replaceWith</strong>('<strong>fruit</strong>'); .replaceALl与其操作方向相反</td></tr><tr><td>包裹结点</td><td>包裹结点:$('strong').<strong>wrap</strong>('<b></b>'); 包裹结点内容：$('strong').wrapInner('<b></b>');</td></tr><tr><td>属性操作</td><td>获取属性值：var p_txt = $('p').<strong>attr</strong>('title'); 设置属性值：$('p').attr('title', 'title xionger'); 删除属性：$('p').<strong>removeAttr</strong>('title');</td></tr><tr><td>样式操作</td><td>获取样式：var p_style = $('p').attr('class'); 设置样式：$('p').attr('class', 'handsome'); 追加样式：$('p').<strong>addClass</strong>('another');</td></tr><tr><td>设置和获取HTML、文本和值</td><td>.<strong>html</strong>(), .<strong>text</strong>(), .<strong>val</strong>() $('#address').focus(function() {var txt_value = $(this).val(); if (txt_value == '请输入邮箱地址') { $(this).val(''); } });</td></tr><tr><td>遍历结点</td><td>.<strong>children</strong>(),获取匹配元素的子元素集合 .<strong>next</strong>(), <strong>prev</strong>(),<strong>siblings</strong>()获取前一个/后一个/所有兄弟 .closest(),获取最近的匹配元素 $(document).bind('click', function(e) {$(e.target).closest('li').css('color', 'red'); });</td></tr><tr><td>CSS-DOM操作</td><td>var color_txt = $('p').<strong>css</strong>('color');$('p').css({'fontSize':'30px', 'backgroundColor':'#888888'});</td></tr></tbody></table><p> </p><p>在jQuery中，对Ajax方法进行了封装，如下表所示。</p><table><colgroup><col /><col /></colgroup><tbody valign="top"><tr><td><p><strong>Ajax方法</strong></p></td><td><p><strong>示例</strong></p></td></tr><tr><td><p>.<strong>load</strong>()</p></td><td><p>参数：url[,data][,callback]</p><p><strong>$('#resText').load('test.html');</strong></p></td></tr><tr><td><p>$.get()/$.<strong>post</strong>()</p></td><td><p>参数包括url,data,callback，以及返回内容的格式的type,包括xml,html,script,_default</p><p>$.post('/tasks', $(#form01).serialize(), handler, 'json');</p></td></tr><tr><td><p>$.getScript()</p><p>$.getJSON()</p></td><td><p>动态加载js， $.getScript('/public/js/test.js');</p><p>$.getJSON('/public/resources/test.json');</p><p>JSONP形式加载其他网站JSON数据示例：</p><p>$('#send').click(function() {</p><p>$.<strong>getJSON</strong>('http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?', function(data) {</p><p>$.each(data.items, function(i, item) {</p><p>$("<img class='para'/>").attr('src', item.media.m).appendTo('#resText');</p><p>if (i == 3) {</p><p>return false;</p><p>}});});});</p></td></tr><tr><td><p><strong>$.ajax();</strong></p></td><td><p>参数包括url,type, timeout（ms）,data,</p><p>datatype(xml,html,sscript,json.jsonp,text)</p><p>beforeSend, complete, success, error, global</p></td></tr><tr><td><p>序列化元素</p></td><td><p><strong>$(#form01).serialize()</strong>序列化为字符串,其等价于:</p><p>'username' + <strong>encodeURIComponent</strong>($('#content').val())+'&'+ 'xxx';</p><p>.serializeArray()序列化为JSON数据</p><p>$.param(obj)将普通对象序列化</p></td></tr><tr><td><p>全局事件</p></td><td><p>$('#loading').ajaxStart(function(){});</p><p>.ajaxStop(), .ajaxComplete(),.ajaxSend(),.ajaxSuccess()</p></td></tr></tbody></table><p> 具体示例如下所示，这儿示例是form提交，而不是json提交，需要注意（通常调用接口，使用json提交；而页面的ajax请求，推荐使用form提交，会比较简单）。</p><p><img src="/upload/otherpic53/212930.jpg" alt="JQuery快速入门"> View Code</p><p>fiddler截图如下，比如对于java spring-mvc，该form报文可以直接序列化为对象，无需添加@RequestBody注解。 </p><p><img src="/upload/otherpic53/212932.jpg" alt="JQuery快速入门"></p><p> </p><p><img src="/upload/otherpic53/212934.jpg" alt="JQuery快速入门"></p><p>之前就介绍的$(document).ready()相信大家都不会陌生，其与window.onload实际上有一些区别的，前者是当DOM加载完成后触发，而后者则是页面中的所有元素(包括所有关联元素)加载完成后执行。在jQuery中，通常事件绑定是通过bind(type[,data],fn)方法实现的，其第一个参数为事件类型，非常丰富，包括blur,focus,load,resize,unload,click,dblclick,mousedown/up/move/over/out/enter/leave,change,select,submit,keypress/down/up等。</p><p>还可以通过.unbind解绑事件，.trigger(eventType)来模拟触发事件（包含默认行为），.triggerHandler()触发事件且不执行默认行为。此外，jQuery提供了合成事件，比如.hover(enter,leave),toggle(fn1,fn2)。</p><p>对于jQuery中的事件来说，其均使用事件冒泡机制，而不支持时间捕获机制(可以用原生js)。事件冒泡就是当页面上有个元素时，其中一个嵌套在另一个中，如果均绑定了click事件，那么触发内层元素的click事件时，会同时触发外部的click事件。这样的机制在有时是需要的，但有时却不是期望的，那么就绪要通过event.stopPropagation()方法来禁止事件的冒泡了，</p><p>此外，在jQuery中，可以通过event.preventDefault()方法来阻止元素的默认行为，常用与a链接元素和submit表单提交行为。需要注意的，jQuery实际上对event进行了封装，以屏蔽不同浏览器的差异，event.target用于获取触发事件的元素，.relatedTarget获取相关元素(mouseover,mouseout)，.pageX/pageY获取页面坐标，.which获取鼠标左中右键(值为1,2,3),.metaKey获取Ctrl键，.originalEvent获取原始事件对象。</p><p>接下来，将介绍jQuery库非常吸引人的动画操作，如下表所示。</p><table><colgroup><col /><col /></colgroup><tbody valign="top"><tr><td><strong>方法</strong></td><td><strong>诠释</strong></td></tr><tr><td>.show(),.hide(),.<strong>toggle</strong>()</td><td>显示和隐藏元素，$('element').show(1000);</td></tr><tr><td>.fadeIn(),fadeOut() .fadeTo()</td><td>改变元素的不透明度</td></tr><tr><td>.slideUp(), .slideDown().<strong>slideToggle</strong>()</td><td>通过修改元素高度达到元素上下移动的效果</td></tr><tr><td>.animate()</td><td>自定义动画方法,$('element').animate({left:'500px'},3000);.stop(param),停止动画,param=true，可以清空动画队列</td></tr></tbody></table><p>jQuery插件非常多，但最常用的要数验证插件了，最后通过一个示例来了解validation插件。</p><p><img src="/upload/otherpic53/copycode.gif" alt="JQuery快速入门"></p><pre>$('#commentForm').validate({ rules: { username: { required: true, minlength: 2 }, email: { require: true, email: true }, url: 'url', comment: 'required'};});</pre><p><img src="/upload/otherpic53/copycode.gif" alt="JQuery快速入门"></p> <br> 文章题目：JQuery快速入门 <br> 网页网址：<a href="http://cdkjz.cn/article/giopsj.html">http://cdkjz.cn/article/giopsj.html</a> </div> <div class="g-return-wrapper clearfix"> <a href="http://www.cdkjz.cn/" class="home">返回首页</a> <a href="http://www.cdkjz.cn/news/" class="column">了解更多建站资讯</a> </div> </div> </div> <div class="full-related-news"> <h3 class="related-title">相关资讯</h3> <div class="related-news weblg"> <ul class="clearfix"> <li> <a href="/article/ceogeo.html"> <h2 class="title">dos或cmd中删除、添加、修改注册表的命令-创新互联</h2> </a> </li><li> <a href="/article/ceogpd.html"> <h2 class="title">java中servlet的作用-创新互联</h2> </a> </li><li> <a href="/article/ceoggc.html"> <h2 class="title">删除里表中前几个元素的方法-创新互联</h2> </a> </li><li> <a href="/article/ceoghs.html"> <h2 class="title">C++string解析深浅拷贝-创新互联</h2> </a> </li><li> <a href="/article/ceogho.html"> <h2 class="title">centos6.5安装john-1.8.0-创新互联</h2> </a> </li><li> <a href="/article/ceogei.html"> <h2 class="title">python语句分隔的案例-创新互联</h2> </a> </li><li> <a href="/article/ceogpc.html"> <h2 class="title">程序员笔记\|详解Eureka缓存机制-创新互联</h2> </a> </li><li> <a href="/article/ceogji.html"> <h2 class="title">SpringBoot3.0正式发布，这份升级指南必须收藏-创新互联</h2> </a> </li> </ul> </div> </div> <div class="full-icontact-cover m-ft-contact"> <div class="weblg"> <div class="clearfix content"> <div class="motto"> 多年建站经验 </div> <div class="info"> <h3>多一份参考，总有益处</h3> <h2> 联系快上网，免费获得专属《策划方案》及报价</h2> <div class="msg"> <p>咨询相关问题或预约面谈，可以通过以下方式与我们联系</p> <h4> 大客户专线成都：<a href="tel:+13518219792" rel="nofollow">13518219792</a> 座机：<a href="tel:02886922220" rel="nofollow">028-86922220</a> </h4> </div> </div> </div> <div class="btns clearfix"> <a href="https://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" target="_blank" rel="nofollow" class="oline">在线咨询</a> <a href="javascript:;" class="edit" rel="nofollow">提交需求</a> </div> </div> </div> <div class="footer-content"> <div class="weblg clearfix"> <div class="friend-links"> <h6 class="clearfix"> <span class="tilte">友情链接</span> <a class="exchagne" href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes">交换友情链接</a> </h6> <div class="link-list clearfix"> <div class="link-slider"> <a href="http://www.emts.com.cn/about/" title="东方电机技改服务有限公司" target="_blank">东方电机技改服务有限公司</a><a href="http://www.scghjhjc.cn/" title="四川广汉锦华" target="_blank">四川广汉锦华</a><a href="https://www.cdcxhl.com/tuoguan/zongshu/" title="成都棕树机房" target="_blank">成都棕树机房</a><a href="https://www.xwcx.net/hkcloud.html" title="香港云主机" target="_blank">香港云主机</a><a href="https://www.cdcxhl.com/mobile.html" title="手机网站制作设计" target="_blank">手机网站制作设计</a><a href="http://www.pswzsj.com/" title="平山县网站建设" target="_blank">平山县网站建设</a><a href="https://www.cdxwcx.com/city/chongzhou/" title="崇州网站建设" target="_blank">崇州网站建设</a><a href="http://www.cxhljz.cn/app/" title="ios开发" target="_blank">ios开发</a><a href="http://www.tvybhd.com/" title="水泥基自流平" target="_blank">水泥基自流平</a><a href="https://www.xwcx.net/zuyong.html" title="成都服务器租用" target="_blank">成都服务器租用</a> </div> </div> </div> </div> <div class="full-foot-bottom"> <div class="weblg clearfix"> <p>成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层建设咨询<a href="tel:028-86922220">028-86922220</a></p> <p> 成都快上网科技有限公司-四川网站建设设计公司 \| <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">蜀ICP备19037934号</a> Copyright 2020,ALL Rights Reserved cdkjz.cn \| <a href="http://www.cdkjz.cn/" target="_blank">成都网站建设</a> \| © Copyright 2020版权所有.</p> <p>专家团队为您提供<a href="http://www.cdkjz.cn/" target="_blank">成都网站建设</a>,<a href="http://www.cdkjz.cn/" target="_blank">成都网站设计</a>,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ \| 成都网站建设哪家好？ \| <a href="###">网站建设地图</a></p> </div> </div> </div> <script type="text/javascript" src="../js/idangerous.swiper.min.js"></script> <script type="text/javascript" src="../js/wow.min.js"></script> <script type="text/javascript" src="../js/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="../js/jquery.placeholder.min.js"></script> <script type="text/javascript" src="../js/layout.js"></script> </body> </html> <script> $(".singlepage img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>

网站建设

网站推广

案例

方案

电商网站开发

微信小程序

我们

联系

精准传达 • 有效沟通

查看其它板块

JQuery快速入门

网络推广

Network promotion

网站方案

Solution

电商网站开发

E-commerce & System

我们

About Us

联系

Contact Us

精准传达 • 有效沟通

查看其它板块

JQuery快速入门