从零开始学jQuery(1)--基础知识
别问我为什么突然跳到jquery了…我只能说…前面一点刚看的没怎么理解…就这里比较好理解
jQuery
jQuery可能很多人都有一点印象,是个比较好用的查询方式,利用jQuery可以比较容易的查询到节点内容
之前我们使用的都是
var p=document.getElementById('ds');
看着就比较麻烦，而用了jQuery之后可以大大缩短我们的代码量，也很方便
要想使用jQuery,在加上
<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: {…} }
因为 就把选择范围限定在name属性为game的div里。 多层选择也是允许的 因为 还有一些选项 再换一个… :checkbox :radio :hidden :visible :checked :input 感觉两个效果一样，不知道为什么要多一个 当然也可以多重判断 :focus 可以选择当前输入焦点的元素，把光标放到一个的祖先节点，所以上面两种方式都可以选出DOTA。
要选择节点
$('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: {…} }
如果页面有很多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: {…} } // [], 无法选出
>用于绝对的父子关系
还记得刚才的
$('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]一样；
$('input:checkbox')
Object { 0: input, 1: input, length: 2, prevObject: {…} }//可以选择复选框，和input[type=checkbox]一样;
$('input:radio')
Object { 0: input, 1: input, length: 2, prevObject: {…} } //可以选择单选框，和input[type=radio]一样；
$('input:hidden')
Object { 0: input, length: 1, prevObject: {…} }// 所有隐藏的input
$('input:visible')
Object { 0: input, 1: input, 2: input, 3: input, 4: input, 5: input, length: 6, prevObject: {…} } // 所有可见的input
$('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>，<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');//这也行
var x;
var int=self.setInterval(function(){
x=$('input:focus')
},10000)
x;
Object { 0: input, length: 1, prevObject: {…} }//这就是刚才我们光标放的input
上，用$('input:focus')就可以选出,我是用延迟实现的…