🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
库和框架的区别
库是将代码集合成的一个产品，供程序员调用。
面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。 在函数库中的可直接使用的函数叫库函数。
开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。
框架则是为解决一个(一类)问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。可以说，框架是库的升级版。开发者在使用框架的时候，必须使用这个框架的全部代码。
框架和库的比较可以想像为: 假如我们要买一台电脑 框架为我们提供了已经装好的电脑，我们只要买回来就能用，但你必须把整个电脑买回来。这样用户自然轻松许多，但会导致很多人用一样的电脑，或你想自定义某个部件将需要修改这个框架。
而库就如自己组装的电脑。库为我们提供了很多部件，我们需要自己组装，如果某个部件库未提供，我们也可以自己做。库的使用非常灵活，但没有框架方便。
什么是 jQuery
jQuery 是一套 Javascript 脚本库. Javascript脚本库类似于.NET 的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户使用
注意jQuery是脚本库, 而不是脚本框架. 库不等于框架, 比如System程序集是类库,而ASP.NET MVC是框架.
jQuery 并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事.
脚本库能够帮助我们完成编码逻辑,实现业务功能.
使用 jQuery 将极大的提高编写 javascript 代码的效率, 让写出来的代码更加优雅, 更加健壮. 同时网络上丰富的 jQuery 插件也让我们的工作变成了有了jQuery,天天喝茶水, 因为我们已经站在巨人的肩膀上了.
例如:
创建一个 ASP.NET MVC 项目时, 会发现已经自动引入了 jQuery 类库.
jQuery 几乎是微软的御用脚本库了!完美的集成度和智能感知的支持,让.NET和jQuery天衣无缝结合在一起!所以用.NET就要选用jQuery而非Dojo,ExtJS等.
jQuery特点
1.提供了强大的功能函数
使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁.
2.解决浏览器兼容性问题
javascript 脚本在不同浏览器的兼容性一直是 Web 开发人员的噩梦, 常常一个页面在 IE7,Firefox下运行正常, 在 IE6 下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情. 有了 jQuery 我们将从这个噩梦中醒来
举个栗子
比如: 在 jQuery 中的 Event 事件对象已经被格式化成所有浏览器通用的, 从前要根据 event 获取事件触发者, 在 ie 下是 event.srcElements 而 ff 等标准浏览器下下是 event.target. jQuery 则通过统一 event 对象,让我们可以在所有浏览器中使用 event.target 获取事件对象.
3.实现丰富的 UI
jQuery 可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变效果为例, 从前我自己写了一个可以兼容ie和ff的渐变动画, 使用大量javascript代码实现, 费心费力不说, 写完后没有太多帮助过一段时间就忘记了. 再开发类似的功能还要再次费心费力.如今使用 jQuery 就可以帮助我们快速完成此类应用.
4.纠正错误的脚本知识
原因就是大部分开发人员对于 javascript 存在错误的认识
例如:
在页面中编写加载时即执行的操作 DOM 的语句, 在HTML 元素或者 document 对象上直接添加"onclick"属性, 不知道 onclick 其实是一个匿名函数等等. 拥有这些错误脚本知识的技术人员也能完成所有的开发工作, 但是这样的程序是不健壮的.
比如"在页面中编写加载时即执行的操作 DOM 的语句", 当页面代码很小用户加载很快时没有问题, 当页面加载稍慢时就会出现浏览器"终止操作"的错误.
而jQuery 提供了很多简便的方法帮助我们解决这些问题, 一旦使用 jQuery 你就将纠正这些错误的知识–因为我们都是用标准的正确的 jQuery脚本编写方法!
下载 jQuery
直接到官网去下载即可:
官方地址 https://jquery.com/download/
如图
目前最新的版本为: 3.7.1
注意: 我个人觉得最新的版本不一定就是最好的版本!
DOM对象和 jQuery包装集
Dom对象
在传统的javascript开发中,我们都是首先获取Dom对象
例如
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
我们经常使用 document.getElementById 方法根据id 获取单个Dom对象, 或者使用 document.getElementsByTagName 方法根据HTML标签名称获取Dom对象集合.
另外在事件函数中, 可以通过在方法函数中使用this引用事件触发对象(但是在多播事件函数中IE6存在问题), 或者使用event对象的target(FF)或srcElement(iIE6)获取到引发事件的Dom对象.
注意我们这里获取到的都是Dom对象, Dom对象也有不同的类型比如input, div, span等. Dom对象只有有限的属性和方法。
jQuery包装集可以说是Dom对象的扩充.在jQuery的世界中将所有的对象, 无论是一个还是一组, 都封装成一个jQuery包装集,比如获取包含一个元素的jQuery包装集:
例如
var jQueryObject = $("#testDiv");
Dom对象与 jQuery 对象的转换
1.Dom转 jQuery 包装集
如果要使用jQuery提供的函数, 就要首先构造jQuery 包装集. 我们可以使用本文即将介绍的jQuery选择器直接构造jQuery包装集
例如
$("#testDiv");
上面语句构造的包装集只含有一个id是testDiv的元素. 或者我们已经获取了一个Dom元素
例如
var div = document.getElementById("testDiv");
上面的代码中div是一个Dom元素, 我们可以将Dom元素转换成jQuery包装集:
例如
var domToJQueryObject = $(div);
jQuery 包装集转 Dom对象
jQuery包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素:
例如
var domObject = $("#testDiv")[0];
注意, 通过索引器返回的不再是 jQuery包装集, 而是一个 DOM对象!
jQuery包装集的某些遍历方法,比如each()中, 可以传递遍历函数, 在遍历函数中的this也是DOM元素,
例如:
$("#testDiv").each(function() {
alert(this)
})
如果我们要使用jQuery的方法操作DOM对象,怎么办?
用上面介绍过的转换方法即可:
例如
$("#testDiv").each(function() { $(this).html("修改内容") })
什么是 jQuery选择器
在Dom编程中我们只能使用有限的函数根据id或者 TagName获取 Dom对象.
在jQuery中则完全不同,jQuery提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以 jQuery 包装集的形式返回.
首先来看看什么是选择器:
举个栗子 根据 ID获取 jQuery包装集
var jQueryObject = $("#testDiv");
上例中使用了ID选择器, 选取id为testDiv的Dom对象并将它放入jQuery包装集, 最后以 jQuery包装集的形式返回.
$符号在jQuery中代表对 jQuery对象的引用, jQuery是核心对象, 其中包含下列方法:
jQuery( selector, [context] )
返回值: jQuery 包装集
Selector :用来 查找的字符串 context (可选)：作为待查找的 DOM 元素集、文档或 jQuery 对象。
根据选择器选取匹配的对象, 以jQuery包装集的形式返回.
context可以是Dom对象集合或jQuery包装集, 传入则表示要从context中选择匹配的对象, 不传入则表示范围为文档对象(即页面全部对象).
上面这个方法就是我们选择器使用的核心方法.可以用$代替jQuery 让语法更简介,
比如下面两句话的效果相同: 根据 ID获取 jQuery包装集
var jQueryObject = $("#testDiv");
$是 jQuery对象的引用:
var jQueryObject = jQuery("#testDiv");
举个栗子
现在我们要找到所有 p 元素，并且这些元素都必须是 div 元素的子元素
代码
<p>one</p> <div><p>two</p></div> <p>three</p>
找到的结果应该如下:
再比如说: 在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)
jQuery 代码:
$("input:radio", document.forms[0]);
再比如说: 在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素
jQuery 代码:
$("div", xml.responseXML);
jQuery( html, ownerDocument )
根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。
你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制，可以参考第二个示例。
当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。
例如，创建一个 span ，可以用$("<span/>") 或 $("<span></span>")但不推荐 $("<span>")。
在jQuery 中，这个语法等同于$(document.createElement("span"))
参数解释
htmlString: 用于动态创建DOM元素的HTML标记字符串
ownerDocument (可选)Document 创建DOM元素所在的文档
比如我们现在动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。
在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。所以，这个函数既有灵活性，也有局限性。
jQuery 代码:
$("<div><p>Hello</p></div>").appendTo("body");
创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。
jQuery 代码:
在 IE 中无效: $("<input>").attr("type", "checkbox"); // 在 IE 中有效: $("<input type='checkbox'>");
jQuery( html, props)
根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。
同时设置一系列的属性、事件等。
参数解释
htmlString 用于动态创建DOM元素的HTML标记字符串
propsMap 用于附加到新创建元素上的属性、事件和方法
举个栗子
动态创建一个 div 元素（以及其中的所有内容）,并将它追加到 body 元素中。
在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。
所以，这个函数既有灵活性，也有局限性。
jQuery 代码:
$("<div>", { "class": "test", text: "Click me!", click: function(){
$(this).toggleClass("test");
} }).appendTo("body");
比如: 创建一个<input>元素，同时设定 type 属性、属性值，以及一些事件。
jQuery 代码:
$("<input>", { type: "text", val: "Test", focusin: function() {
$(this).addClass("active"); }, focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery(elements)
将一个或多个DOM元素转化为jQuery对象。
这个函数也可以接收XML文档和Window对象（虽然它们不是DOM元素）作为有效的参数。
参数 elementsElement, Array<Element> 用于封装成jQuery对象的DOM元素
举个栗子
设置页面背景色。
jQuery 代码:
$(document.body).css( "background", "black" );
描述:隐藏一个表单中所有元素。
jQuery 代码:
$(myForm.elements).hide()
jQuery( callback )
其实就是 $(document).ready()的简写。
允许你绑定一个在DOM文档载入完成后执行的函数。
这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。
从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。
你可以在一个页面中使用任意多个$(document).ready事件。参考 ready(Function) 获取更多 ready 事件的信息。
参数
callbackFunction 意思是当DOM加载完成后要执行的函数
当DOM加载完成后，执行其中的函数。
jQuery 代码:
$(function(){ // 文档就绪 });
使用$(document).ready()的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
jQuery 代码:
jQuery(function($) { // 你可以在这里继续使用$作为别名... });
jQuery常见选择器
其实如果你学习好了CSS选择器，那么对jquery选择器的理解就不会那么困难了!
通俗的讲, Selector选择器就是一个表示特殊语意的字符串. 只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回.
jQuery的选择器支持CSS3选择器标准. 下面是W3C最新的CSS3选择器标准:
查看地址: http://www.w3.org/TR/css3-selectors/
如图
标准中的选择器都可以在jQuery中使用.
jQuery选择器按照功能主要分为选择和过滤. 并且是配合使用的. 可以同时使用组合成一个选择器字符串.
主要的区别是过滤作用的选择器是指定条件从前面匹配的内容中筛选, 过滤选择器也可以单独使用, 表示从全部*中筛选. 比如: $(":[title]") 等同于: $("*:[title]")
而选择功能的选择器则不会有默认的范围, 因为作用是选择而不是过滤.
下面的选择器分类中, 带有过滤器的分类表示是过滤选择器, 否则就是选择功能的选择器.
以下是一些常见的选择器和过滤器种类:
基础选择器
如下表:
| 名称 | 说明 | 举例 |
|---|---|---|
| * | 选择所有元素 | $(“*”) |
| #id | 选取id=lastname 的元素 | $(“#lastname”) |
| .class | 选取所有 class=“intro” 的元素 | $(“.intro”) |
| element | 所有 元素 | $(“p”) |
| selector1, selector2, selectorN | 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同 时选中这几个选择器匹配的内容. | $(“#divId, a, .bgRed”) |
层次选择器
如下表:
| 名称 | 说明 | 举例 |
|---|---|---|
| ancestor descendant | 使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input. | $(“.bgRed div”) 选择CSS ID为bgRed的所有 元素. |
| parent > child | 选择parent的直接子节点child. child必须包含在parent中并且父类是parent 元素. | $(“.myList>li”) 选择CSS类为myList直接子节点
|
| prev + next | prev 和next 是两个同级别的元素. 选中在prev元素后面的next元素. | $(“#hibiscus+img”)选在id为hibiscus 面的img对象. |
| prev ~ siblings | 选择prev后面的根据siblings过滤的元素 注:siblings是过滤器 | $(“#someDiv~[title]”)选择ID为someDiv对 象后面所有带有title属性的元素 |
选择器过滤器
如下表:
| 名称 | 说明 | 举例 |
|---|---|---|
| :first | 匹配找到的第一个元素 | 查找表格的第一行$(“tr:first”) |
| :last | 匹配找到的最后一个元素 | 查找表格的最后一行$(“tr:last”) |
| :not(selector) | 去除所有与给定选择器匹配的元素 | $(“input:not(:empty)”)所有不为空的 input 元素 |
| :even | 匹配所有索引值为偶数的元素，从 0 开始计数 | 查找表格的1、3、5…行:$(“tr:even”) |
| :odd | 匹配所有索引值为奇数的元素，从 0开始计数 | 查找表格的2、4、6行:$(“tr:odd”) |
| :eq(index) | 匹配一个给定索引值的元素 注:index从 0 开始计数 | 查找第二行:$(“tr:eq(1)”) |
| :gt(index) | 匹配所有大于给定索引值的元素 注:index从 0 开始计数 | 列出 index 大于 3 的元素$(“ul li:gt(3)”) |
| :lt(index) | 选择结果集中索引小于 N 的 elements 注:index从 0 开始计数 | 列出 index 小于 3 的元素$(“ul li:lt(3)”) |
| :header | 选择所有h1,h2,h3一类的header 标签. | $(“:header”) |
| :animated | 匹配所有正在执行动画效果的元素 |
内容过滤器
| 名称 | 说明 | 举例 |
|---|---|---|
| :contains(text) | 匹配包含给定文本的元素 | 查找所有包含 “John” 的 div 元素:$(“div:contains(‘John’)”) |
| :empty | 匹配所有不包含子元素或者文本的空元素 | 查找所有不包含子元素或者文本的空元素:$(“td:empty”) |
| :has(selector) | 匹配含有选择器所匹配的元素的元素 | 给所有包含 p 元素的 div 元素添加一个 text 类: $(“div:has§”). |
| :parent | 匹配含有子元素或者文本的元素 | 查找所有含有子元素或者文本的 td 元素:$(“td:parent”) |
| 名称 | 说明 | 举例 |
|---|---|---|
| :hidden | 匹配所有的不可见元素 注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility 属 性让其不显示但是占位,则不输入hidden. | 查找所有不可见的 tr 元素:$(“tr:hidden”) |
| :visible | 匹配所有的可见元素 | 查找所有可见的 tr 元素:$(“tr:visible”) |
属性过滤器
| [attribute] | 匹配包含给定属性的元素 | 查找所有含有 id 属性的 div 元素**😗* $(“div[id]”) |
|---|---|---|
| [attribute=value] | 匹配给定的属性是某个特定值的元素 | 查找所有 name 属性是 newsletter 的 input 元素: $(“input[name=‘newsletter’]”).attr(“checked”, true); |
| [attribute!=value] | 匹配给定的属性是不包含某个特定值 的元素 | |
| [attribute^=value] | 匹配给定的属性是以某些值开始的元素 | $(“input[name^=‘news’]”) |
| [attribute$=value] | 匹配给定的属性是以某些值结尾的元素 | 查找所有 name 以 ‘letter’ 结尾的 input 元素: ( " i n p u t [ n a m e ("input[name ("input[name=‘letter’]") |
| [attribute*=value] | 匹配给定的属性是以包含某些值的元素 | 查找所有 name 包含 ‘man’ 的 input 元素: $("input[name*='m |
| [attributeFilter1] [attributeFilter2] [attributeFilterN] | 复合属性选择器，需要同时满足多个条 件时使用。 | 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的: ( " i n p u t [ i d ] [ n a m e ("input[id][name ("input[id][name=‘man’]") |
子元素过滤器
| 名称 | 说明 | 举例 |
|---|---|---|
| :nth-child(index/e ven/odd/equation) | 匹配其父元素下的第N个子或奇偶元素 ‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！ 可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2) | 在每个 ul 查找第 2 个li: $(“ul li:nth-child(2)”) |
| :first-child | 匹配第一个子元素 ‘:first’ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 | 在每个 ul 中查找第一个 li: $(“ul li:first-child”) |
| :last-child | 匹配最后一个子元素 ':last’只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 | 在每个 ul 中查找最后一个 li: $(“ul li:last-child” |
| :only-child | 如果某个元素是父元素中唯一的子元素，那将会被匹配,如果父元素中含有其他元素，那将不会被匹配。 | 在 ul 中查找是唯一子元素的 li: $(“ul li:only-child”) |
表单选择器
| 名称 | 说明 | 举例 |
|---|---|---|
| :input | 匹配所有 input, textarea, select 和 button 元素 | 查找所有的input元素: $(“:input”) |
| :text | 匹配所有的文本框 | 查找所有文本框: $(“:text”) |
| :password | 匹配所有密码框 | 查找所有密码框: $(“:password”) |
| :radio | 匹配所有单选按钮 | 查找所有单选按钮 |
| :checkbox | 匹配所有复选框 | 查找所有复选框: $(“:checkbox”) |
| :submit | 匹配所有提交按钮 | 查找所有提交按钮: $(“:submit”) |
| :image | 匹配所有图像域 | 匹配所有图像域: $(“:image”) |
| :reset | 匹配所有重置按钮 | 查找所有重置按钮: $(“:reset”) |
| :button | 匹配所有按钮 | 查找所有按钮: $(“:button”) |
| :file | 匹配所有文件域 | 查找所有文件域: $(“:file”) |
| 名称 | 说明 | 举例 |
|---|---|---|
| :enabled | 匹配所有可用元素 | 查找所有可用的input元素: $(“input:enabled”) |
| :disabled | 匹配所有不可用元素 | 查找所有不可用的input元素: $(“input:disabled”) |
| :checked | 匹配所有选中的被选中元素(复选框、单选框等， 不包括select 中的option) | 查找所有选中的复选框元素: $(“input:checked”) |
| :selected | 匹配所有选中的option元素 | 查找所有选中的选项元素: $(“select option:selected”) |
小结
对于刚刚开始学习jquery其实很简单，多看文档，多实践，这些选择器，方法都是现成直接调用就可以了!
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇
