1 jquery 概念
jquery是基于js开发的框架。这个框架将原生的js代码封装了,成为了一个函数库,我们只需要按照其语法进行调用即可。
其实jquery对js原生代码进行封装就像java的类封装了很多方法一样,是类似的概念。
注意
jquery函数库的下载是在maven的网站进行下载
jquery只是一个js函数库,要是用里面的函数还需要在其他的js文件中进行调用
将jquery拷贝到项目中进行调用
使用js加载事件的方法
//原生加载事件
window.onload=function(){
alert("事件加载")
}
使用jq加载事件的三种方法
第一种写法
//jq中提供的加载事件
$(document).ready(function(){
//指定其中代码
alert("加载html完毕后马上执行代码")
});
第二种写法
//jq中提供的加载事件
$(function(){
//指定其中代码
alert("加载html完毕后马上执行代码")
});
第三种写法
//jq中提供的加载事件
jQuery(document).ready(function($){
//指定其中代码
alert("加载html完毕后马上执行代码")
});
DEMO使用jq操作html的节点
<body>
<table border="5">
<tr>
<td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪水</td>
<td>部门编号</td>
</tr>
<tr>
<td>7788</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7932</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7369</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7521</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
</table>
使用js实现
结果是
使用jq实现
·$(“tr”) 表示选择出页面中的所有的tr元素
·$(“tr:eq(0)”) 表示选择出页面中的第一个tr元素
·$(“tr:eq(0)”).html() 表示取得页面中的第一个元素下的html代码
结果是
2 jq 选择器
概念 :jq选择器和css选择器语法类似,选择器是jq的灵魂,离开了选择器什么也做不了,它是将html中的节点元素选择出来的语法,他也是非常灵活的
1 Id选择器
特点
在ID属性值之前加上“ # ”
html代码
<div id = "notMe">
<p>id="notMe"</p>
</div>
<div id="myDiv">
id="myDiv"
</div>
jq代码
$(document).ready(function(){
var div= $("#myDiv");
});
结果
<div id="myDiv">
id="myDiv"
</div>
2 类选择器
特点
1.在class属性值之前加上“ . ”
2.返回值是一个元素的对象数组
html代码
<div class="notMe">
div class = "notMe"
</div>
<div class="myClass">
div class="myClass"
</div>
<span class="myClass">
span class="myClass"
</span >
jq代码
$(document).ready(function(){
var d= $(".myClass");
})
结果
<div class="myClass">
div class="myClass"
</div>
<span class="myClass">
span class="myClass"
</span >
3 元素选择器
特点
1.直接使用用元素名称选择
2.返回值是一个对象数组
html代码
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jq代码
$(document).ready(function(){
var d= $("div");
})
结果
<div>DIV1</div>
<div>DIV2</div>
4 组选择器
特点
1.一次可以使用多种选择器选择元素,每个选择器用“ ,”隔开
2.返回值类型是一个对象数组
html代码
<div>div</div>
<p class='myClass'>
p class="myClass"
</p>
<span>span</span>
<p class="notMyClass">
p class="notMyClass"
</p>
jq代码
$(function(){
var elemeents= $("div , span , .myClass");
})
结果
<div>div</div>
<p class='myClass'>
p class="myClass"
</p>
<span>span</span>
5 后代选择器
特点
1.选择出指定父元素下指定的所有子孙元素
2.返回值类型是一个对象数组
html代码
<form>
<lable>Name:</lable>
<input name="name"/>
<fieldset>
<lable>Newsletter:</label>
<input name="newsletter"/>
</fieldset>
</form>
<input name="none"/>
jq代码
$(function(){
var einputs= $("form input");
})
结果
<input name="name"/> , <input name="newsletter"/>
6 子选择器
特点
1.选择指定父元素在的子元素
2.返回值类型是一个对象数组
html代码
<form>
<laable>Name:</lable>
<input name="name"/>
<fieldset>
<lable>Newsletter:</label>
<input name="newsletter"/>
</fieldset>
</form>
<input name="none"/>
jq代码
$(function(){
var input= $("form >input");
})
结果
<input name="name"/>
7 选择第一个元素
html代码
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jq代码
$(function(){
var item= $("ul li:first");
console.log(item[0]);
})
结果
<li>list item 1</li>
8 最后一个元素
html代码
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jq代码
$(function(){
var item= $("ul li:last");
console.log(item[4]);
})
结果
<li>list item 5</li>
9 not 选择器
一般在复选框中使用的多(表单的复选框中)
返回值是对象数组
html代码
<input type="checkbpx" checked name="ints">阅读
<input type="checkbox" name="ints">跑步
<input type="chekkbox" name="ints">篮球
<input type="chekkbox" checked name="ints">游泳
jq代码
$(function(){
var boxes= $("input:not(:checked)");
for(var i=0;i<boxes.length.i++){
console.log(boxes[i]);
}
})
结果
<input type="checkbox" name="ints">跑步
<input type="chekkbox" name="ints">篮球
10 偶数选择器
html代码
<body>
<table border="5">
<tr>
<td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪水</td>
<td>部门编号</td>
</tr>
<tr>
<td>7788</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7932</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7369</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7521</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
</table>
jq代码
$(document).ready(function(){
var trs = $("table tr:even");
for(var i=0;i<trs.length;i++){
$("trs[i]".css({color:"#fff0011",background:"blue"})
)}
});
结果
11 奇数选择器
1,不管是奇数还是偶数选择,都是以元素索引为准(从0开始)
2,他们的返回值都是一个对象数组
html代码
<body>
<table border="5">
<tr>
<td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪水</td>
<td>部门编号</td>
</tr>
<tr>
<td>7788</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7932</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7369</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7521</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
</table>
jq代码 $(function(){ var trs=$("table tr :odd") for(var i=0,i
结果
12 eq选择器
特点
1,选择指定索引的元素对象
2,返回值是一个对象
html代码
<body>
<table border="5">
<tr>
<td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪水</td>
<td>部门编号</td>
</tr>
<tr>
<td>7788</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7932</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7369</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7521</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
</table>
jq代码
$(function(){
var trs= $("table tr :eq(2)")
for(var i=0;i<trs.length;i++){
$(trs[i].css({color:#ff0011,background:"blue"}))}
});
结果
13 gt(index)选择器,选择大于指定索引的元素
html代码
<body>
<table border="5">
<tr>
<td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪水</td>
<td>部门编号</td>
</tr>
<tr>
<td>7788</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7932</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7369</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7521</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
</table>
jq代码
$(function(){
var trs= $("table tr :gt(0)")
for(var i=0;i<trs.length;i++){
$(trs[i].css({color:#ff0011,background:"blue"}))}
});
结果
14 lt(index)选择器 选择小于指定索引的元素
html代码
<body>
<table border="5">
<tr>
<td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪水</td>
<td>部门编号</td>
</tr>
<tr>
<td>7788</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7932</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7369</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
<tr>
<td>7521</td><td>smith</td><td>president</td><td>5000.00</td><td>10</td>
</tr>
</table>
jq代码
$(function(){
var trs= $("table tr :lt(2)")
for(var i=0;i<trs.length;i++){
$(trs[i].css({color:#ff0011,background:"blue"}))}
结果
15 属性选择器
1 id 属性
html代码
<div>
<p>hello!</p>
</div>
<div id="test2"></div>
jq代码
$(function(){
var divs=$("div[id]");
console.log(divs[0]);
});
结果
<div id="test2"></div>
2 选择出“具有”指定属性且属性值等于指定的内容的所有元素
结果
3选择出“不具有”指定属性且属性值等于指定的内容的所有元素
结果
4 选出以指定内容开始的属性的所有元素
结果为
5 查找所有name指定包含“man”的元素
结果为
6 选择出以指定内容结尾的元素
html代码
jq代码
KaTeX parse error: Expected '}', got 'EOF' at end of input: …){ var inputs=(“input[name$=‘letter’]”)
})
结果
3 jquery常用方法
1 取得指定元素下的所有子元素
html 代码
<p>hello</p>
<div>
<span>hello again</span>
<p>这是段落</p>
</div>
jq代码
$(function(){
var div=$("div").children()})
结果
<span>hello again</span>
<p>这是段落</p>