从零开始学jQuery(1)--基础知识

别问我为什么突然跳到jquery了…我只能说…前面一点刚看的没怎么理解…就这里比较好理解
jQuery
jQuery可能很多人都有一点印象,是个比较好用的查询方式,利用jQuery可以比较容易的查询到节点内容
之前我们使用的都是

var p=document.getElementById('ds');

看着就比较麻烦，而用了jQuery之后可以大大缩短我们的代码量，也很方便
要想使用jQuery,在<head></head>加上

<script src="http://code.jquery.com/jquery-3.5.1.js"></script>

不用下载，直接从官网引用就可以

emm这一环节的学习测试还是用我们自己的网页…，就弄个最简单的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
</body>
</html>

空网站，但是支持jQuery
jQuery里最常用的就是$这个变量,起到选择器的效果

$; // jQuery(selector, context)
jQuery;function b(e, t)

$这个变量和jQuery是一个效果,之所以jQuery显示成这样是我自己在这个页面检查元素看的…但有时候我们的$已经被使用了，所以需要jQuery释放这个变量,释放完之后就使用相同效果的JQuery即可，就像csdn上一样，也是为了避免冲突

jQuery.noConflict(); //释放$变量
$; // undefined
jQuery; // jQuery(selector, context)

具体查询操作
以下面这个页面为例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
<style>
.red{color:red;
}
.green
{background-color:green;
}
</style>
</head>
<body>
<p id ='test' class="red"> hahahah</p>
<p id ='12' class="red green"> yingying</p>
<form>
pwd<input type=password name="password"></input>
id<input type=text name="username"></input>
</form>
</body>
</html>

jQuery查找id属性

p=$('#12');//Object { 0: p#12.red.green, length: 1 }注意，id前面有#哟

注意开头加上#。返回的对象是jQuery对象。

按标签查找(也就是<>这样的)只需要写上标签名称就可以了

p=$('p');//Object { 0: p#test.red, 1: p#12.red.green
, length: 2, prevObject: {…} }
p.length;//查询长度
2

按class查找,注意在class名称前加一个.

p=$('.red');
Object { 0: p#test.red, 1: p#12.red.green, length: 2, prevObject: {…} } // 所有节点包含`class="red"`都将返回

通常很多节点有多个class，我们可以查找同时包含red和green的节点：

vp=$('.red')
Object { 0: p#test.red, 1: p#12.red.green, length: 2, prevObject: {…} }// 注意没有空格！

一个节点除了id和class外还可以有很多属性，很多时候按属性查找会非常方便，比如在一个表单中按属性来查找

p=$('[name="username"]')
Object { 0: input, length: 1, prevObject: {…} } // 找出< name="username">,因为外面有'号了，所以里面用"比较好
p=$('[type="password"]')
Object { 0: input, length: 1, prevObject: {…} } // 找出< type="password">

当属性的值包含空格等特殊字符时，需要用双引号括起来。

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

p= $('[name^=user]');
Object { 0: input, length: 1, prevObject: {…} }// 找出所有name属性值以user开头的DOM
p=$('[type$=word]')
Object { 0: input, length: 1, prevObject: {…} }// 找出所有name属性值以word结尾的DOM

这个方法尤其适合通过class属性查找，且不受class包含多个名称的影响

p=$('[class^=red]')
Object { 0: p#test.red, 1: p#12.red.green, length: 2, prevObject: {…} }// 找出所有class包含至少一个以`red`开头的DOM

组合查找
就是把上述简单选择器组合起来使用。如果我们查找$(’[name=username]’)的input，很可能把表单外的也找出来,但我们只希望查找，就可以这么写

p=$('input[name=username]')
Object { 0: input, length: 1, prevObject: {…} }//就只会找到我们填写表单的username

同样的，根据tag和class来组合查找也很常见：

p=$('p.red')
Object { 0: p#test.red, 1: p#12.red.green, length: 2, prevObject: {…} }//找出p里面class为red的dom

多项选择器
就是把多个选择器组合起来一块选：

 $('p,input');
Object { 0: p#test.red, 1: p#12.red.green, 2: input, 3: input, length: 4, prevObject: {…} }
$('p.red,p.green');// 把<p class="red">和<p class="green">都选出来
Object { 0: p#test.red, 1: p#12.red.green, length: 2, prevObject: {…} }

你可能会认为p.red.green第一次和第二次都被选中了，应该会出现两次，但要注意的是，选出来的元素是按照它们在HTML中出现的顺序排列的，而且不会有重复元素,所以只出现一次

当然我们也可以从上到下查询
更新一下页面结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<div class="game"  name="game">
<ul class="MOBA">
<li class="pc1">DOTA</li>
<li class="pc2">LOL</li>
<li class="pc3">300英雄 </li>
<li class="mobile">王者荣耀</li>
</ul>
<ol class="sport">
<li class="water">游泳</li>
<li class="land">篮球</li>
<ol>
</div>
<form class="game">
<p>请输入你喜欢的游戏<input type=text name="game"></input></p>
</form>
</body>
</html>

这里我没有设置重复元素，当然在实际情况中我们为了避免查到可能出现的一样的元素，最好遵循一个tree的父子结构

$('ul.MOBA li.pc1');
Object { 0: li.pc1, length: 1, prevObject: {…} }
$('div.game li.pc1');
Object { 0: li.pc1, length: 1, prevObject: {…} }

因为<div>和<ul>都是<li>的祖先节点，所以上面两种方式都可以选出DOTA。
要选择<ul>下所有的<li>节点

$('ul.MOBA li')
Object { 0: li.pc1, 1: li.pc2, 2: li.pc3, 3: li.mobile, length: 4, prevObject: {…} }

$('div[name=game] li')
Object { 0: li.pc1, 1: li.pc2, 2: li.pc3, 3: li.mobile, 4: li.water, 5: li.land, length: 6, prevObject: {…} }

就把选择范围限定在name属性为game的div里。
如果页面有很多div，其他表单的li不会被选择

多层选择也是允许的

$('form.game p input')
Object { 0: input, length: 1, prevObject: {…} } // 在form表单选择被<p>包含的<input>

$('ul.MOBA>li.pc1')
Object { 0: li.pc1
, length: 1, prevObject: {…} } // 可以选出dota$('div.game>li.pc1')
Object { length: 0, prevObject: {…} } // [], 无法选出

因为<div>和<li>不构成父子关系,相当于爷孙了.>用于绝对的父子关系
还记得刚才的

$('ul.MOBA li'); / /选出DOTA、LOL和300英雄.王者 4个节点

$('ul.MOBA li:first-child');
Object { 0: li.pc1, length: 1, prevObject: {…} }// 仅选出DOTA
$('ul.MOBA li:last-child')
Object { 0: li.mobile, length: 1, prevObject: {…} }// 仅选出王者
$('ul.MOBA li:nth-child(2)')
Object { 0: li.pc2, length: 1, prevObject: {…} }//选出第N个元素.N从1开始
$('ul.MOBA li:nth-child(odd)')
Object { 0: li.pc1, 1: li.pc3, length: 2, prevObject: {…} }// 选出序号为奇数的元素
$('ul.MOBA li:nth-child(even)')
Object { 0: li.pc2, 1: li.mobile, length: 2, prevObject: {…} }// 选出序号为偶数的元素

还有一些选项

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<form class="game">
<p>请输入你喜欢的游戏<input type=text name="game1"></input></p>
<p>请上传你喜欢的游戏<input type=file name="game2"></input></p>
<p>请选择你喜欢的游戏<input type=checkbox name="game3">DOTA</input><input type=checkbox name="game4">LOL</input></p>
<p>请选择你的段位<input type=radio name="game5">黄金 </input><input type=radio name="game5">白银</input></p>
<p>你看不见我<input type=hidden name="game1"></input></p>
</form>
</body>
</html>

再换一个…
:file

$('input:file')
Object { 0: input, length: 1, prevObject: {…} }//可以选择<input type="file">，和input[type=file]一样；

:checkbox

$('input:checkbox')
Object { 0: input, 1: input, length: 2, prevObject: {…} }//可以选择复选框，和input[type=checkbox]一样;

:radio

$('input:radio')
Object { 0: input, 1: input, length: 2, prevObject: {…} } //可以选择单选框，和input[type=radio]一样；

:hidden

$('input:hidden')
Object { 0: input, length: 1, prevObject: {…} }// 所有隐藏的input

:visible

$('input:visible')
Object { 0: input, 1: input, 2: input, 3: input, 4: input, 5: input, length: 6, prevObject: {…} } // 所有可见的input

:checked

$('input:checked')
Object { 0: input, length: 1, prevObject: {…} }//选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，因为我勾上了dota所以有

$('input:disabled');//选择那些不能输入的，我还不是很懂为什么不能输入
Object { length: 0, prevObject: {…} }$('input:enabled')
Object { 0: input, 1: input, 2: input, 3: input, 4: input, 5: input, 6: input, length: 7, prevObject: {…} }//可以选择可以正常输入的<input>、<select> 等

:input

$(':input');//可以选择<input>，<textarea>，<select>和<button>
Object { 0: input, 1: input, 2: input, 3: input, 4: input, 5: input, 6: input
, length: 7, prevObject: {…} }$('input')
Object { 0: input, 1: input, 2: input, 3: input, 4: input, 5: input, 6: input, length: 7, prevObject: {…} }

感觉两个效果一样，不知道为什么要多一个

当然也可以多重判断

$('input:checkbox:checked')//选中的复选框
Object { 0: input, length: 1, prevObject: {…} }
$('input:radio:checked')//选中的单选框
Object { length: 0, prevObject: {…} }
$('input[type=radio]:checked');//这也行

:focus

var x;
var int=self.setInterval(function(){ x=$('input:focus')},10000)x;
Object { 0: input, length: 1, prevObject: {…} }//这就是刚才我们光标放的input

可以选择当前输入焦点的元素，把光标放到一个<input>上，用$('input:focus')就可以选出,我是用延迟实现的…

从零开始学jQuery(1)--基础知识相关推荐

从零开始学 Python 之基础篇
从零开始学 Python 之基础篇前言大家好,这里是「痴海」从零开始学习 Python 系列教程.此文首发于「痴海」公众号,欢迎大家去关注.学习一门语言最好的办法,就是教懂别人.在这公众号,我会从 ...
学计算机知识视频,教你学电脑——计算机基础知识【视频】*
教你学电脑--计算机基础知识[视频]* 2018-09-22 一.计算机概述六.微型计算机的硬件系统 1.1 发展简史 6.1 微 ...
【从零开始学Skynet】基础篇（九）：调试控制台服务
Skynet自带了一个调试控制台服务debug_console,启动它之后,可以查看节点的内部状态. 1.启用调试控制台 (1)在skynet/examples目录下新建main_console.lu ...
学习Spring必学的Java基础知识
学习Spring必学的Java基础知识(1)----反射引述要学习Spring框架的技术内幕,必须事先掌握一些基本的Java知识,正所谓"登高必自卑,涉远必自迩".以下几项Jav ...
web前端开发三个阶段和三要素，学前端必备基础知识
web前端开发三个阶段和三要素是什么?下面就跟着小编一起来看看吧! Web前端市场前景广阔,吸引了很多人涌入学习,但无论是零基础小白,亦或是想要进阶深造的程序员,前端开发三个阶段和三要素都是他们必学的 ...
物联网入门怎么学？物联网基础知识
最近无际看了一些关于物联网的文章,发现大多数写的都让人望而却步. 什么Linux.ARM.C++.Zigbee.蓝牙.Wifi.NB-IOT等等看的头皮发麻. 我很不喜欢把一个简单的东西复杂化增加大家 ...
菜鸟学算法一基础知识篇
菜鸟学算法<一>知识准备篇刚刚上任,急着给兄弟们一点见面礼,嘿嘿前言:论坛上有关算法分析的文章不少,也不少精品但对于刚学CARACK来说,只是叹为观止原因如下: 1.论坛高手如云, ...
从零开始学架构——架构基础
本文章的内容是根据书籍<从零开始学架构>整理的资料,供作者以及读者查阅. 1. 架构的定义软件架构指软件系统的顶层架构.详细阐述如下: a. "系统由一群关联个体组成" ...
西北工业大学计算机基础学什么,计算机基础知识和基本操作（第2版）-西北工业大学.pdf...
算机基础知识和基本操作 (第2 版) 本书编委会编西北工业大学出版社内容提要]本书是为计算机基础教学和广大电脑爱好者自学而编写的教材.本书的特点是基于 Windows XP 操作平台,主 ...

从零开始学jQuery(1)--基础知识

从零开始学jQuery(1)--基础知识相关推荐

最新文章

热门文章