JavaScript复习笔记（十二）jQuery

最新推荐文章于 2022-08-19 14:12:31 发布

kattiekattie

最新推荐文章于 2022-08-19 14:12:31 发布

阅读量249

点赞数

分类专栏： JS复习笔记（LXF官网）文章标签： javascript jquery

本文链接：https://blog.csdn.net/m0_37925276/article/details/125524886

版权

一、引入

<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

jQuery把所有功能全部封装在一个全局变量jQuery中，而$是变量jQuery的别名。
$本质上是一个函数，但函数也是对象，$除了可以直接调用外，也有很多其他属性。

$占用
如果这个变量被占用了，还不能改，就只能使用jQuery这个变量

$; // jQuery(selector, context)
jQuery.noConflict();
$; // undefined
jQuery; // jQuery(selector, context)

原理是jQuery在占用$之前，先在内部保存了原来的$,调用jQuery.noConflict()时会把原来保存的变量还原

二、jQuery对象

返回的对象是jQuery对象：类似数组，它的每个元素都是一个引用了DOM节点的对象
——返回对象[<div id="abc">...</div>]
——如果不存在，返回 []
总之选择器不会返回undefined或者null

jQuery对象和DOM对象之间可以互相转化（一般直接用jQuery对象）

var div = $('#abc'); // jQuery对象
var divDom = div.get(0); // 假设存在div，获取第1个DOM元素
var another = $(divDom); // 重新把DOM包装为jQuery对象

三、选择器

按ID查找： var div = $('#abc');
按tag查找：var ps = $('p'); // 返回所有<p>节点
按class查找：
var a = $('.red'); // 所有节点包含class="red"都将返回
var a = $('.red.green'); // 注意没有空格！
按属性查找：
var email = $('[name=email]'); // 找出<??? name="email">

按属性查找还可以使用前缀查找或者后缀查找：

var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"
var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM
// 例如: class="icon-clock", class="abc icon-home"

组合查找
多项选择器

多项选择器就是把多个选择器用,组合起来一块选【不会有重复元素】

$('p,div'); // 把<p>和<div>都选出来
$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来

层级选择器
因为DOM的结构就是层级结构，所以我们经常要根据层级关系进行选择。
层级之间用空格隔开。
子选择器 >

<child>节点必须是<parent>节点的直属子节点: $('parent>child')

$('ul.lang>li.lang-javascript'); 
// 可以选出[<li class="lang-javascript">JavaScript</li>]

过滤器（Filter）:

它通常附加在选择器上，帮助我们更精确地定位元素。

$('ul.lang li:first-child');// 选出第一个元素
$('ul.lang li:last-child'); // 选出最后一个元素
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

表单相关
:input：选择<input>，<textarea>，<select>和<button>；
:file：选择<input type="file">；
:checkbox：选择复选框，和input[type=checkbox]一样；
:radio：选择单选框，和input[type=radio]一样；
:focus：选择当前输入焦点的元素
:checked：选择当前勾上的单选框和复选框，获得用户选择的项目
:enabled：选择可以正常输入的<input>、<select> 等，也就是没有灰掉的输入；
:disabled：和:enabled正好相反，选择那些不能输入的。
可见 / 隐藏
$('div:visible'); // 所有可见的div
$('div:hidden'); // 所有隐藏的div
查找
子节点中查找：find()
从当前节点开始向上查找：parent()
同一层级：next()和prev()
过滤
过滤掉不符合选择器条件的节点：filter()
把DOM节点转化为其他对象：map()

var arr = langs.map(function () {
   
    return this.innerHTML;
}).get(); 
// 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']