从Javascript到jQuery

0.前置知识：Javascript，DOM

JavaScript：前端三件套（3）-Javascript - ZitWang - 博客园 (cnblogs.com)

DOM：DOM-文档对象模型 - ZitWang - 博客园 (cnblogs.com)

参考文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

1.Javascript开发利器-jQuery

1.一个快速、简洁的JavaScript库，使用户可以更加方便的处理HTML，CSS，DOM等

2.对原生的JS进行封装-----------提供方法、events、选择器，并且方便地为网站提供 AJAX 交互，并且解决了浏览器的兼容问题

2.jQuery开发

2.1基本步骤

  1. 下载库文件-实际上就是.js文件
  2. 使用标签script引入jQuery库文件

     

     

  3. 使用相关的函数与对象

2.2案例：对比使用 jQuery与传统DOM+JS

传统DOM+JS：

        window.onload = function () {
            //1. 得到id=btn01 的dom对象
            var btn01 = document.getElementById("btn01");
            //2. 绑定点击事件
            btn01.onclick = function () {
                alert("hello, js");
            }
        }
        <button id="btn01">按钮1</button>

使用jQuery：

$(function (){
//1.得到btn01这个对象->jquery对象，通过$（"#id"）来获取必须在id前有#

// $btn01 是一个jquery对象 其实就是对dom对象的包装.这时我们就可以使用jquery对象的方法
// 约定好了 jquery对象的命名以$开头.
var $btn01 = $("#btn01");
//2.绑定click事件
$btn01.click(function (){
alert("hello,jquery...~~~")
})

两相对比，不难发现。在JQuery中，

 $(function(){}) 替换了原生的js的window.onload= function(){}
即用$（）将要在页面window加载完毕时显示的内容（执行的函数操作）包起来即可。

另外，使用jQuery对象.事件（方法）代替了dom对象，将代码进行了简化，<ps:这个例子中暂时没感觉到简化很多，后续慢慢体会>--------体会到了，jQuery提供了很多方法，选择器，提供直接调用API实现功能，方便了开发。

3.jQuery对象与DOM对象

1.jQuery对象其实就是dom对象经过包装而来的，这个对象是JQuery所独有的，只有它可以使用jQuery里的方法,例如：$("#id").html();前面的$("#id")就是jQuery对象

2.DOM对象转成JQuery对象

$(DOM对象)；十分方便，$是约定好了的，只要获取的是jQuery对象就在对象前面加$；

3..JQuery对象转成DOM对象

由于JQuery对象是一个对象数组，所以使用【index】和.get(index)方法，一般来说index是0；、

eg：var DOM对象 = jQuery对象【0】；

      var DOM对象 = jQuery对象.get(0)；

4.jQuery选择器

相关API可以参考文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

4.1 选择器介绍

JQuery选择器是 jQuery 的核心, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器。

优化：简洁代码写法，完善了事件处理机制，考虑了兼容，异常，健壮性等

jQuery对象在细节方面做了进一步处理，例如dom对象如果获取为空的时候在用它去调方法会Error，而jQuery对象底层做了处理，返回一个undefined，不会报错。

4.2基本选择器

提供元素id，class，标签名来查找DOM元素

 

 

 全选；id选择器；类选择器；元素选择器；组合选择器（多个选择器，结果合并一起返回）

------------（css学习中提到过类似概念）

4.3层次选择器

提供DOM元素之间的层次关系来查找DOM元素

1.parent > child:父元素下的第一节子元素   eg：body> div 

body> div > div :表示body下的第二茬div元素

 

 

 

 2.选择层次为：某元素后的（所有）下一个元素

3.层次选择：某元素后的兄弟元素

 

$("#id"~div)选择id元素后面所有兄弟（同辈）元素

$("#id").siblings("div")选择id元素所有兄弟（同辈）元素(前后都要)

 

 4.层次选择：某元素的所有后代

4.4基础过滤选择器

eg：$("div:first").css("属性"，"值")；

 

 

 

 

 

 

4.5内容过滤选择器

1.2.contains：包含指定字符串的所有元素,子有而父有，都选中

eg：$("div:contains('John')")

反向操作contains：选出不含有某个字符串的所有元素：

eg：$("div ：not（:contains('John')）")

顺便体会jQuery选择器的组合使用（将其中一个蓝色部分看成整体，在使用not基础过滤选择器）

 

 

 

 3.parent ：与empty相反，选择含有某个标签的所有的元素

4.:has(selector)说明: 匹配含有选择器所匹配的元素的元素.

eg: $("div:has(.mini)").addClass("test") 返回值为所有包含 class=mini元素的 div ，然后给所有包含class=mini元素的div 标签加上 class

4.6可见与否过滤选择器

可见度过滤选择器：根据元素的可见和不可见状态来选择相应的元素

1、:hidden 用法: $("div:hidden") 

说明: 匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到.

即 css 中 display:none 和 input type="hidden"的都会被匹配到 。

2、:visible 用法: $("div:visible") 

说明: 匹配所有的可见元素.

4.7属性过滤选择器

过滤规则：通过元素的属性来获取相应的元素

 

 

 

4.8子元素过滤选择器

4.9表单选择器

 

 

 

4.10表单属性过滤选择器

主要对所选择的表单元素进行过滤

1、:enabled   eg: $("input:enabled") 

说明: 匹配所有可用元素.意思是查找所有 input 中不带有 disabled="disabled"的 input. 不为 disabled,当然就为 enabled 

2、:disabled  eg: $("input:disabled") 

说明: 匹配所有不可用元素.与上面的那个是相对应的.

3、:checked   eg: $("input:checked") 

说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括 select 中的 option).

4、:selected   eg : $("select option:selected") 

说明：匹配所有选中的 option 元素

5.jQuery的DOM操作

jQuery对复杂的dom操作进行了简化！

5.1查找结点，修改属性

找到对象，调用的attr() 方法获取对象的各种属性值

5.2创建节点

1.（手动）动态创建（元素）节点: 使用 jQuery 的工厂函数 $(): $(html标签); 会根据传入的 html 标记字符串 创建一个 jQuery 对象，这个对象不会自动添加到document中，需要使用其他方法将其插入。

注意：

  1.  jQuery 的工厂函数 $(): $(html标签)中使用闭合标签和使用标准的 XHTML 格式。
  2. 创建文本节点就是创建元素节点时直接把文本内容写出来;
  3. 创建属性节点也是在创建元素节点时一起创建。

2.插入方法

将jQuery对象插入文档的方法主要有两类，内部插入/外部插入

解释：内部插入就是插入到指定元素的内部，结果是插入的元素成为其子节点/子元素

插入方法：既可以将新的jQuery 对象插入到文档中, 也能对原有的 jQuery 对象进行移动，实现一些业务需求。

内部插入方法：

  • .append(content)    举例说明：A.append(B):B插入到A的内部结尾处
  • .appendTo(content)                A to B:A插入到B的内部结尾处
  • .prepend(content)                  B插入到A的内部开始处
  • .prependTo((content)             A to B:A插入到B的内部开始处

           外部插入就是插入到指定元素的外部，它们成为兄弟节点/元素

外部插入方法：

  • .after(content) :           举例说明：A.after(B):B插入到A后面
  • .before(content):                         B插入到A前面
  • .insertAfter(content):           A.insertAfter(B)  ：A插入B的后面
  • .insertBefore(content) :        A.insertBefore(B)  ：A插入B的前面

5.3删除节点

.remove():从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛 选元素. 当某个节点被remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.

.empty():清空，删除（清空）所有后代节点内容，架子还在。

5.4复制节点

1、clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.

2、clone(true): 复制元素的同时也复制元素中的的事件

5.5替换节点

1.replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM/juqery 元素

举例：A.replaceWith(B)用B来替换A

2.replaceAll(): 颠倒了的 replaceWith() 方法.

举例：A.replaceAll(B)，用A去替换all的B

3.注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失

5.6属性操作

 

attr（）；

attr()传递一个参数时, 即为某元素的获取指定属性 

attr()传递两个参数时, 即为某元素设置指定属性的值

5.7样式操作

样式：class----也是元素的一个属性

  • 获取 class 和设置 class 使用 attr() 方法来完成.
  • 追加样式: addClass() ；
  • 移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
  • 切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
  • 判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

5.8获取HTML，文本，值

5.9遍历节点方法

1、取得匹配元素的所有(直系)子元素组成的集合: children(). 该方法只考虑子元素而不考虑其他后代元素.

2、取得匹配元素后面的同辈元素的集合:next()/nextAll();

3、取得匹配元素前面的同辈元素的集合:prev()/prevAll();

4、取得匹配元素前后所有的同辈元素: siblings()

5、获取指定的第index个元素: nextAll().eq(index)

6、对获取到的同辈元素按标签进行过滤 nextAll().filter("标签")

5.10 CSS-DOM 操作

6.jQuery中的事件-加载DOM

1.在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件.

2. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, window.onload = function(){}

3. 在 jQuery 中使用$(document).ready() 方法，简化写法就是$()

 补充资料：

正则表达式速查表：正则表达式 | jQuery API 3.2 中文文档 | jQuery API 在线手册 (cuishifeng.cn)

posted @ 2023-01-11 15:05  ZitWang  阅读(96)  评论(0)    收藏  举报