微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

jQuery从小白开始---初始jQuery

分类：jQuery作者：编程之家AI导航网

  • 查询（jQuery=js+Query），正如jQuery官方logo副标题所说（write less，do more）使用jQuery能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单。

一个版本呢？说到这就该看一下这三个版本的区别：

  • jQuery 1x ：兼容IE678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本为：1.12.4。
  • jQuery 2x ：不兼容IE678，相对1x文件较小，官方只做BUG维护，功能不再新增，最终版本为：2.2.4。
  • jQuery 3x ：不兼容IE678，只支持最新浏览器，很多老的jQuery插件不支持这个版本，相对1x文件较小，提供不包含Ajax/动画API版本。

性能和查看百度、淘宝等网站去判断，现在多用的是jQuery1x版。

注：可根据自身需求去下载jQuery版本）

  1. 代码中的空格和换行，并且自行变更了参数

引入jQuery文件

函数就是：$（）

编写jQuery代码

jQuery和原生JS的区别

代码：

一个img

<div class="cnblogs_code">

然后我们用原生JS来看看

window.onload = img = document.getElementsByTagName("img")[0

通过原生JS入口函数可以拿到DOM元素

同样用jQuery来试试

$().ready( $img = $("img")[0

通过jQuery入口函数可以拿到DOM元素

那我们在试试分别获取DOM元素的宽高

JS

width =mputedStyle(img).width; height =mputedStyle(img).height; console.log("onload",width,height);

通过原生JS可以得到DOM元素的宽高

jQuery

$width = $height ="ready",$width,$height);

 

（注意，在运行这一个代码时需要清除浏览器的历史记录）

从这些可以看出

  • 原生JS和jQuery入口函数的加载模式不同
  • 原生JS会等到DOM元素加载完毕，并且也会等图片加载完毕才执行
  • jQuery会等到DOM元素加载完毕，但不会等图片加载完毕就执行

函数呢？

window.onload = function(一个= function(一个
  • 原生JS编写多个入口函数，后面的会覆盖前面的
  • jQuery编写多个入口函数，后面的不会覆盖前面的

jQuery入口函数的其它几种写法（了解一下就好了）

在使用中，我们通常使用第三种，因为write less嘛

 静态方法和实例方法

　　什么是静态方法和实例方法？

<div class="cnblogs_code">

 jQuery-each方法与原生JS的forEach方法

用数组和伪数组举例

用原生JS的forEach静态方法遍历数组

  1. 第一个参数：遍历到的元素
  2. 第二个参数：当前遍历到的索引
  3. 注意：原生JS的forEach方法只能遍历数组，不能遍历伪数组

用jQuery的each方法遍历伪数组

  1. 第一个参数：当前遍历到的索引
  2. 第二个参数：遍历到的元素
  3. 注意：jQuery的each方法可以遍历数组和伪数组

 jQuery-each方法与原生JS的map方法

用原生JS的map方法遍历

  1. 第一个参数：当前遍历到的元素
  2. 第二个参数：当前遍历到的索引
  3. 第三个参数：当前被遍历的数组
  4. 注意：原生JS的map方法跟它的forEach一样，不能遍历伪数组

用jQuery的map方法遍历

  1. 第一个参数：要遍历的数组
  2. 第二个参数：每遍历一个元素之后执行的回调函数
  1. 第一个参数：遍历到的元素
  2. 第二个参数：遍历到的索引
  3. 注意：jQuery的map方法和它的each方法一样，数组跟伪数组都可以遍历

方法和each方法都可以遍历数组和伪数组，那么它们有什么区别呢？

<div class="cnblogs_code">

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

jquery页面搜索关键词突出显示
页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(&quot;.list_r&quot;).find(&#39;span&#39;).css({ // 每次搜索开始，先把所有字体颜色恢复初始状态 &#39;color&#39;: &quot;#838792&quot;
jQuery实时显示日期、时间
jQuery实时显示日期、时间 html: &lt;span id=&quot;time&quot;&gt;&lt;/span&gt; js: &lt;script src=&quot;Js/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;%--引用jQuery
jQuery 添加水印
jQuery 添加水印 &lt;script src=&quot;../../../../AJs/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; $(document).re
Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
中文：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息，之所以出现此错误，常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪。详细信息：分析附近的“输
Asp.net 后台调用js方法
1. 用Response.Write方法 代码如下： Response.Write(&quot;&lt;script type=&#39;text/javascript&#39;&gt;alert(&quot;XXX&quot;);&lt;/script&gt;&quot;); 此方只能调用内部函数
Jquery实现按钮点击遮罩加载，处理完后恢复
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按钮调用OnClientClick事件，添加dom元素及样式。 2.当Click中逻辑执行完后，在Click中调用js方法删除掉刚才添加的dom元素。 1 &lt;%@ Page Language=&quot;C#&quot; Auto
.Net后台调用js，提示、打开新窗体、关闭当前窗体
.Net后台调用js，提示、关闭当前窗体、打开新窗体 Response.Write(&quot;&lt;script&gt;window.alert(&#39;支付成功!&#39;);window.open(&#39;/JkCommerce/&quot; + href + &quot;&#39;,&
.net 搜索联想词
思路： 1.ajax请求后台方法获取数据。 2.通过jquery将请求到的数据显示在页面上。 前台 &lt;div class=&quot;sc_con&quot; id=&quot;bbsearch&quot;&gt; &lt;input type=&quot;text&quot; class=&
JS点击子元素不触发父元素点击事件(js阻止冒泡)
&lt;html&gt; &lt;title&gt;&lt;/title&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;style type=&quot;text/css&quot;&gt; .divone{width:100
jQuery表单验证提交：前台验证一
jQuery表单验证提交：前台验证一（图文+视频）
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native