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

最新推荐文章于 2020-11-22 23:41:50 发布

azraelxuemo

最新推荐文章于 2020-11-22 23:41:50 发布

阅读量600

点赞数 2

分类专栏： # jQuery学习笔记文章标签： jquery

本文链接：https://blog.csdn.net/azraelxuemo/article/details/106540895

版权

jQuery学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

别问我为什么突然跳到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')就可以选出,我是用延迟实现的…

azraelxuemo

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
从零开始学jQuery(1)--基础知识

jQueryjQyery可能很多人都有一点印象,是个比较好用的查询方式之前我们使用的都是var p=document.getElementById('ds');看着就比较麻烦，而用了jQuery之后可以大大缩短我们的代码量，也很方便要想使用jQuery,在<head></head>加上<script src="http://code.jquery.com/jquery-3.5.1.js"></script>jQuery里最常用的就是$这个变量
复制链接

扫一扫