jQuery基础使用
-
jQuery概述
jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是"Write Less,Do More",即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript操作方式,优化HTML文档操作、事件处理、动画设计和Ajax交互.
-
jQuery的优势
- 轻量级
- 强大的选择器
- 出色的 DOM 操作的封装
- 可靠的事件处理机制
- 完善的 Ajax
- 出色的浏览器兼容性
- 链式操作方式
-
jQuery的环境配置
-
-
引入jQuery库文件
-
<script src="jquery-1.12.2.min.js"></script>
-
-
CDN引入
-
CDN的全称是Content Delivery Network,即[内容分发网络](https://baike.baidu.com/item/内容分发网络/4034265), 使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率
CDN地址:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
-
jQuery入门HelloWorld
<script type="text/javascript">
/*
$: jQuery核心函数名
$(): jQuery核心函数
function(){}: 匿名函数,可以作为参数传递给jQuery的核心函数,类似于我们Java的Lamda表达式
作用: 当前的.html文件加载完成之后执行此函数
*/
$(function(){
console.log("Hello jQuery!!!");
});
</script>
-
jQuery对象
1、jQuery对象就是通过jQuery核心对象包装了DOM对象后产生的对象
2、jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法
3、jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用jQuery里的任何方法
4、jQuery的命名一般情况会在变量名称前加$
怎么获取jQuery对象呢? ↓↓↓↓↓↓ 继续 ↓↓↓↓↓↓
第二章 jQuery的选择器/以及CSS样式(jQuery文档使用)
第一节 常见选择器
1.1 基本选择器1
-
ID选择器
<button id="btn">按钮元素</button>
//通过ID获取元素对象,使用jQuery核心函数获取的对象是jQuery对象,ID选择器语法特点使用#作为标识
$("#btn");
-
标签选择器
<div>DIV1</div>
<div>DIV2</div>
//使用标签名称获取元素对象,因为一个页面相同标签名称会有多个,多个标签选择器查询结果是多个
$("div");
-
类选择器
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
//类选择器,标识是前面加一个点(.),查询结果是多个
$(".myClass");
-
分组选择器
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
//查询结果多个,可以使用标签元素查询,ID查询,类查询组成一组的语法格式
$("div,span,p.myClass")
-
通配
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
//查询全部
$("*");
1.2 层级选择器
-
后代选择器
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
// form表单下的所有input元素
$("form input")
-
子类选择器
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
//form表单下的一级子元素
$("form > input")
-
prev + next
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
//匹配所有紧接在 label 元素后的 input 元素
$("label + input")
-
prev ~ siblings
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
//匹配 form 元素之后的所有 input 元素
$("form ~ input")
1.3 基本选择器2
-
:even
匹配所有索引值为奇数的元素，从 0 开始计数 查找表格的1、3、5...行（即索引值0、2、4...）
-
:odd
匹配所有索引值为偶数的元素，从 0 开始计数 查找表格的2、4、6行（即索引值1、3、5...）
<table border="1">
<thead>
<tr>
<th>收费单位</th>
<th>付款方式</th>
<th>结算方式</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
$("tbody tr:even").css("background-color","red");
$("tbody tr:odd").css("background-color","green");
});
</script>
1.4 可见性
-
:hidden
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
//获取隐藏的tr元素
$("tr:hidden")
------------------------------------
<form>
<input type="text" name="email" />
<input type="hidden" name="id" />
</form>
//获取隐藏的input元素
$("input:hidden");
-
:visible
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
//查看所有可见的tr元素
$("tr:visible")
1.5 属性选择器
-
[attribute]
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
//获取带有属性ID的div元素
$("div[id]")
-
[attribute=value]
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
//获取name属性值为newsletter的所有input元素
$("input[name='newsletter']");
1.6 表单属性
-
:checked
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
//获取被选中的input标签
$("input:checked")
-
:selected
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>
//获取select元素下的被选中的option后代标签
$("select option:selected")
1.7 筛选
-
not(expr|ele|fn)
<p>Hello</p><p id="selected">Hello Again</p>
//排除ID为selected的p元素
$("p").not( $("#selected")[0])
-
parent([expr])
<div><p>Hello</p><p>Hello</p></div>
//获取父类元素
$("p").parent()
第二节 常见的事件
-
blur([[data],fn])
当元素失去焦点时触发 blur 事件
-
click([[data],fn])
触发每一个匹配元素的click事件
-
focus([[data],fn])
当元素获得焦点时，触发 focus 事件
-
事件的绑定方式
<button id="btn">绑定事件</button>
//方式一
$("#btn").click(function(){
alert("测试绑定事件");
});
//方式二
$("#btn").on("click",function(){
console.log(this);
});
//方式三
$("#btn").bind("click",function(){
console.log(this);
});
第三节 属性操作以及CSS样式操作
-
3.1 html代码/文本/值
1. html([val|fn]) -> 获取/设置元素的HTML内容,和innerHTML功能相同
2. text([val|fn]) -> 获取/设置元素的text内容
<span></span>
<button id="btn">绑定事件</button>
$("#btn").bind("click",function(){
/* $("span").html("<h1>这是html</h1>"); */
$("span").text("<h1>这是html</h1>");
});
-
3.2 CSS 类
addClass(class|fn) -> 为每个匹配的元素添加指定的类名
<style type="text/css">
.sClass{
font-size: 24px;
color: red;
}
</style>
<span>这是html</span>
<button id="btn">绑定事件</button>
$("#btn").bind("click",function(){
$("span").addClass("sClass");
});
-
3.2 css(name|pro|[,val|fn])
<span class="sClass">这是html</span>
<button id="btn">绑定事件</button>
$("#btn").bind("click",function(){
$(".sClass").css({
"font-size":"200px",
"color":"red"
});
});
第四节 隔行换色练习
-
HTML代码
<table border="1"> <thead> <tr> <th>收费单位</th> <th>付款方式</th> <th>结算方式</th> <th>状态</th> </tr> </thead> <tbody> <tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr> <tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr> <tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr> <tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr> <tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr> <tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr> <tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr> </tbody> </table>
-
jQuery代码
$("tbody tr:even").css("background-color","red");
$("tbody tr:odd").css("background-color","green");
第三章 jQuery的DOM对象和jQuery对象的转换
<button id="btn">我是一个按钮</button>
//使用jQuery选择器获取jQuery对象
var $btn = $("#btn");
console.log($btn);
//将jQuery对象转换成DOM对象
console.log($btn[0]);//方式一
console.log($btn.get(0)); //方式二
//将DOM对象转成jQuery对象
console.log($($btn[0]));
第四章 jQuery节点创建
<table border="1"></table>
//创建<tr></tr>
var trEle = $("<tr></tr>");
var thEle1 = $("<th>ID</th>");
var thEle2 = $("<th>名字</th>");
var thEle3 = $("<th>性别</th>");
trEle.append(thEle1);
trEle.append(thEle2);
trEle.append(thEle3);
var trEle2 = $("<tr></tr>");
var tdEle1 = $("<td>1001</td>");
var tdEle2 = $("<td>张三</td>");
var tdEle3 = $("<td>男</td>");
trEle2.append(tdEle1);
trEle2.append(tdEle2);
trEle2.append(tdEle3);
console.log(trEle[0]);
$("table").append(trEle);
$("table").append(trEle2);
-
基本
1、show -> 展示
2、hide -> 隐藏
第六章 全选/全不选练习
![]()
-
HTML代码
<body>
<form action="#" method="post">
你爱好的运动？
<input type="checkbox" id="checkedAllBox"/>全选/全不选
<br />
<input type="checkbox" name="items" id="" value="足球" />足球
<input type="checkbox" name="items" id="" value="篮球" />篮球
<input type="checkbox" name="items" id="" value="羽毛球" />羽毛球
<input type="checkbox" name="items" id="" value="乒乓球" />乒乓球
<br />
<input type="button" name="" id="checkAllBtn" value="全 选" />
<input type="button" name="" id="checkNoBtn" value="全不选" />
<input type="button" name="" id="checkRevBtn" value="反 选" />
<input type="button" name="" id="sendBtn" value="提 交" />
</form>
</body>
-
JS代码
$(function(){
//获取全选按钮
var checkAllBtn = $("#checkAllBtn");
//给全选按钮绑定单击事件
checkAllBtn.click(function(){
//给所有name属性是items的选中
var items = $("input[name='items']");
console.log("全选");
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
//全选按钮选中
$("#checkedAllBox")[0].checked=true;
});
//全不选
var checkNoBtn = $("#checkNoBtn");
checkNoBtn.click(function(){
//给所有name属性是items的选中
var items = $("input[name='items']");
console.log("全不选");
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
//全不选按钮选中
$("#checkedAllBox")[0].checked=false;
});
//反选
var checkRevBtn = $("#checkRevBtn");
checkRevBtn.click(function(){
var items = $("input[name='items']");
console.log("反选");
for(var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
}
//默认全选勾上
$("#checkedAllBox")[0].checked=true;
for(var i=0;i<items.length;i++){
//如果有一个没选上就勾掉全选
if(!items[i].checked){
$("#checkedAllBox")[0].checked=false;
break;
}
}
});
//提交
var sendBtn = $("#sendBtn");
sendBtn.click(function(){
var items = $("input[name='items']");
console.log("提交");
for(var i=0;i<items.length;i++){
if(items[i].checked){
alert(items[i].value)
}
}
});
//全选/全不选
var checkedAllBox = $("#checkedAllBox");
checkedAllBox.click(function(){
var items = $("input[name='items']");
for(var i=0;i<items.length;i++){
items[i].checked=checkedAllBox[0].checked;
}
});
//items
var items = $("input[name='items']");
for(var i=0;i<items.length;i++){
$(items[i]).click(function(){
//默认全部选中
checkedAllBox[0].checked=true;
for(var j=0;j<items.length;j++){
if(!items[j].checked){
checkedAllBox[0].checked=false;
break;
}
}
});
}
});J
浙公网安备 33010602011771号