<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>5 on 中二青年</title>
    <link>https://zhong-er.com/tags/5/</link>
    <description>Recent content in 5 on 中二青年</description>
    <generator>Hugo</generator>
    <language>zh-cn</language>
    <lastBuildDate>Mon, 09 Sep 2019 00:00:00 +0000</lastBuildDate>
    <atom:link href="https://zhong-er.com/tags/5/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>【前端】JQuery</title>
      <link>https://zhong-er.com/posts/%E5%89%8D%E7%AB%AFjquery/</link>
      <pubDate>Mon, 09 Sep 2019 00:00:00 +0000</pubDate>
      <guid>https://zhong-er.com/posts/%E5%89%8D%E7%AB%AFjquery/</guid>
      <description>&lt;h1 id=&#34;jquerypng&#34;&gt;&lt;img alt=&#34;jQuery.png&#34; loading=&#34;lazy&#34; src=&#34;https://zhong-er.com/assets/201909106733_5460.png&#34;&gt;&lt;/h1&gt;
&lt;h1 id=&#34;jquery&#34;&gt;jQuery&lt;/h1&gt;
&lt;h2 id=&#34;jquery介绍&#34;&gt;jQuery介绍&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;jQuery是一个轻量级的、兼容多浏览器的JavaScript库。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&#34;jquery的优势&#34;&gt;jQuery的优势&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&#34;jquery内容&#34;&gt;jQuery内容：&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;选择器&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;筛选器&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;样式操作&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;文本操作&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;属性操作&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;文档处理&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;事件&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;动画效果&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;插件&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;each、data、Ajax&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;下载链接：&lt;a href=&#34;https://jquery.com/&#34;&gt;jQuery官网&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;中文文档：&lt;a href=&#34;http://jquery.cuishifeng.cn/&#34;&gt;jQuery AP中文文档&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&#34;jquery版本&#34;&gt;jQuery版本&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;em&gt;维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。&lt;/em&gt;&lt;/p&gt;
&lt;h2 id=&#34;jquery对象&#34;&gt;jQuery对象&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$(&amp;quot;#i1&amp;quot;).html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById(&amp;quot;i1&amp;quot;).innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：


var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;拿上面那个例子举例，jQuery对象和DOM对象的使用：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;$(&amp;quot;#i1&amp;quot;).html();//jQuery对象可以使用jQuery的方法
$(&amp;quot;#i1&amp;quot;)[0].innerHTML;// DOM对象使用DOM的方法
&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&#34;jquery基础语法&#34;&gt;jQuery基础语法&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;$(selector).action()
&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&#34;查找标签&#34;&gt;查找标签&lt;/h2&gt;
&lt;h3 id=&#34;基本选择器&#34;&gt;基本选择器&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;id选择器：&lt;/strong&gt;&lt;/p&gt;</description>
    </item>
  </channel>
</rss>
