Jquery 包装集对象

最新推荐文章于 2021-11-30 22:27:10 发布

YiShan0520

最新推荐文章于 2021-11-30 22:27:10 发布

阅读量285

点赞数

文章标签： jquery js

本文链接：https://blog.csdn.net/weixin_45744846/article/details/103722898

版权

Dom 对象与 Jquery 包装集对象

明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的 Dom
对象只有 DOM 接口提供的方法和属性，通过 js 代码获取的对象都是 dom 对象；而通过 jQuery
获取的对象是 jQuery 包装集对象，简称 jQuery 对象，只有 jQuery 对象才能使用 jQuery 提供
的方法。

1. Dom 对象

javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法:
var div = document.getElementById(“testDiv”);
var divs = document.getElementsByTagName(“div”);

2. jQuery 包装集|对象

可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都
封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集var jQueryObject = $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲testDiv");3. Do\dots$ ()方法进行包装即可
var domDiv = document.getElementById(‘mydiv’); // 获取 Dom 对象
mydiv = $(domDiv);

4. jQuery 对象转 Dom 对象

jQuery 对象转 Dom 对象，只需要取数组中的元素即可
//第一种方式获取 jQuery 对象
var jqueryDiv = jQuery(’#mydiv’);
//第二种方式获取 jQuery 对象
jqueryDiv = $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲mydiv'); var do\dots$ ()转为 jQuery 对象
$(’#mydiv’).each(function() {//遍历
var jquery = $(this);
})

案例

write less, do more

第二节 Jquery 选择器

和使用 js 操作 Dom 一样，获取文档中的节点对象是很频繁的一个操作，在 jQuery 中提供
了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery
功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。只要把选择器字
符串传入上面的方法中就能够选择不同的 Dom 对象并且以 jQuery 包装集的形式返回。
jQuery 选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。
基础选择器掌握即可 ,其他用到再查阅。1. 基础选择器 Basics（掌握即可）
选择器名称举例
id 选择器 #id $("#testDiv")选择 id 为 testDiv 的元素
元素名称选择器 element $(“div”)选择所有 div 元素
类选择器 .class $(".blue")选择所有 class=blue 的元素
选择所有元素 * $("*")选择页面所有元素
组合选择器 selector1,
selector2,
selectorN
$("#testDiv,span,.blue")同时选中多个选择器匹配的元素

id 选择器 1 span 中的内容

元素选择器

样式选择器 dom：innerHTML="..."，innerText="..." jquery： .html("...")，.text("...")

2. 层次选择器 Hierarchy

选择器名称举例
后代选择器 ancestor descendant $("#parent div")选择 id 为 parent 的元素的所有 div 元素
子代选择器 parent > child $("#parent>div")选择 id 为 parent 的直接 div 子元素
相邻选择器 prev + next $(".blue + img")选择 css 类为 blue 的下一个 img 元素
同辈选择器 prev ~ sibling $(".blue ~ img")选择 css 类为 blue 的之后的 img 元素

层次选择器

3. 表单选择器

Forms 名称举例
表单选择器 :input 查找所有的 input元素： $(" : i n p u t ") ；注意：会匹配所有的 i n p u t 、 t e x t a r e a 、 s e l e c t 和 b u t t o n 元素。文本框选择器 : t e x t 查找所有文本框：$ (":text")
密码框选择器 :password 查找所有密码框： $(" : p a s s w o r d ") 单选按钮选择器 : r a d i o 查找所有单选按钮：$ (":radio")
复选框选择器 :checkbox 查找所有复选框： $(" : c h e c k b o x ") 提交按钮选择器 : s u b m i t 查找所有提交按钮：$ (":submit")
图像域选择器 :image 查找所有图像域： $(" : i m a g e ") 重置按钮选择器 : r e s e t 查找所有重置按钮：$ (":reset")
按钮选择器 :button 查找所有按钮： $(" : b u t t o n ") 文件域选择器 : f i l e 查找所有文件域：$ (":file")