一 、 jQuery对象与js对象之间的转换
- js的DOM对象转换成jQuery对象: ${js对象} 或者 jQuery(js对象);
- jQuery对象转换成js对象: jQuery对象[索引] 或者jQuery对象.get(索引)
- 语法:
- $(“选择器”)或者jQuery(“选择器”)
-
- var 元素对象 =$("#id值");
-
- 元素对象.val(); //获取当前对象上value属性的值
- 获取输入框的value属性的值:
<<script>
//获取dom对象
var Obj=document.getElementById("username");
//获取jq对象
var $jqObj= $("#username");
//alert("jq"+$jqObj);
//dom对象----->jq对象
//var $userObj1=jQuery(Obj);
var $userObj1 = $(Obj);
alert($userObj1.val())
//jq对象----->dom对象
//var jqObj1=$jqObj[0];
var jqObj1=$jqObj.get(0);
alert("jq:"+jqObj1.value)
</script>
JavaScript和jQuery区别
- 注意事项:
-
- 使用jQuery的方式获取的对象称为**jQuery对象。**jQuery对象本质上是js对象数组。
-
- 使用dom的方式获取的对象称为dom(js)对象。
- 3.两者的方法和属性不能混用:使用jQuery的方法和属性时,必须保证对象是jQuery对象。
二 、 页面加载事件
2.1 格式
- 方式一: $(doucument).ready(function(){
//编写代码
}); - 方式二: $(function(){
//编写代码
}); - 代码:
<script>
//js的同名方法会被覆盖
onload = function () {
alert(1);
}
onload = function () {
alert(2)
}
//js的页面加载事件
//方式一:jq对象的方法
$(document).ready(function () {
alert("A")
});
$(document).ready(function () {
alert("B")
});
$(function () {
alert("AAA")
})
$(function () {
alert("BBB/")
})
</script>
2.2 回顾js事件
事件 | 功能 |
---|---|
onload | 页面加载事件 |
onclick | 单击事件 |
onsubmit | 表单提交事件 |
onblur | 失去焦点 |
onfocus | 获取焦点 |
onchange | 改变事件 |
2.3 js的事件和事件源绑定
2.3.1 方式一:绑定事件
2.3.2 方式二:派发事件
在js代码中获取事件源对象。
- var 元素对象 = document.getElementByID(“id”);
- 元素对象.事件名称 = function(){}
2.4 页面加载成功事件
- 格式一: $(document).ready(function(){});
- 格式二: $(function(){});
注意:
- 在同一个夜间内,jQuery的页面加载成功事件可以出现多次,随机执行(jQuery3.0以后),js的页面加载成功事件能出现多次,但只有最后一个的生效。
- jQuery2.0以前先执行jQ的页面加载成功事件(有序执行)
2.4.1 重点事件
-
click(fun())
-
change(fun())
-
submit(fun())
-
focus(fun())
-
blur(fun())
-
如果你想将jq代码写在head标签中,那么要保证页面加载成功后,才能使用jq的事件
-
jquery对象.事件名称(function(){});
三、 jQuery选择器
3.1 基本选择器
3.1.1 语法
选择器名称 | 语法 | 解释 |
---|---|---|
标签选择器(元素选择器) | $(“html标签名”) | 获得所有匹配标签名称的元素 |
id选择器 | $("#id的属性值") | 获取与指定id属性匹配的元素 |
类选择器 | $(".class的属性值") | 获取与指定的class属性相匹配的元素 |
注意: 多个选择器之间用逗号隔开
- 代码:
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$("#one").css("background-color", "#0ff")
});
//<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
$("#btn2").click(function () {
$(".mini").css("background-color", "#ff0")
});
//<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
$("#btn3").click(function () {
$("div").css("background-color", "#f00");
})
//<input type="button" value="选择 所有的元素." id="btn4" />
$("#btn4").click(function () {
$("*").css("background-color", "yellow")
});
//<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
$("#btn5").click(function () {
$("span,#two").css("background-color", "#f0f")
});
});
</script>
3.2 层级选择器
3.2.1 语法
选择器名称 | 语法 | 解释 |
---|---|---|
后代选择器 | $(“A B”) | 选择A元素内部的所有B元素 |
子选择器 | $(“A>B”) | 选择A元素内部的所有B子元素 |
扩展:
-
$(“A+B”):选择A元素内部的第一个B子元素
-
$(“A~B”):选择A元素的所有的B弟弟。
-
代码演示:
<script type="text/javascript">
$(function () {
//<input type="button" value="选择 body内的所有div元素." id="btn1" />
$("#btn1").click(function () {
$("body div").css("background-color", "#f00");
});
// <input type="button" value="在body内,选择子元素是div的。" id="btn2" />
$("#btn2").click(function () {
$("body>div").css("background-color", "#0f0");
});
// <input type="button" value="选择 id为one 的下一个div元素." id="btn3" />
$("#btn3").click(function () {
$("#one+div").css("background-color", "#00f");
});
// <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" />
$("#btn4").click(function () {
$("#two~div").css("background-color", "#ff0")
});
});
</script>
3.3 属性选择器
3.3.1 语法
选择器名称 | 名称 | 解释 |
---|---|---|
属性选择器 | $(“A[属性名]”) | 包含指定属性的选择器 |
属性选择器 | $(“A[属性名=值]”) | 包含指定属性等于指定值的选择器 |
复合属性选择器 | $(“A[属性名 = 值]…”) | 包含多个属性条件的选择器 |
- 代码实现:
<script type="text/javascript">
$(function() {
//<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
$("#btn1").click(function () {
$("div[title]").css("background-color","pink")
});
//<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" />
$("#btn2").click(function () {
$("div[title=test]").css("background-color","orange");
});
});
</script>
3.4 基本过滤选择器
3.4.1 语法
选择器名称 | 语法 | 解释 |
---|---|---|
首元素选择器 | :first | 获取选择的元素的第一个元素 |
尾元素选择器 | :last | 获取选择元素的最后一个元素 |
非元素选择器 | :not(selecter) | 不包括指定内容的元素 |
偶数选择器 | :even | 偶数,从0开始计数 |
奇数选择器 | :odd | 奇数,从0开始计数 |
等于索引选择器 | :eq(index) | 指定索引元素 |
大于索引选择器 | :gt(index) | 大于指定索引元素 |
小于索引选择器 | :It(index) | 小于指定索引元素 |
标题选择器 | :header | 获取标题元素,固定写法 |
- 代码实现:
<script type="text/javascript">
$(function () {
// <input type="button" value="选择第一个div元素." id="btn1" />
/* $("#btn1").click(function () {
$("div:first").css("background-color","red");
});*/
$("#btn1").click(function () {
$("div:first").css("background-color", "red");
});
// <input type="button" value="选择最后一个div元素." id="btn2" />
$("#btn2").click(function () {
$("div:last").css("background-color", "yellow");
});
// <input type="button" value="选择索引值为偶数 的div元素." id="btn3" />
$("#btn3").click(function () {
$("div:even").css("background-color", "#0f0")
});
// <input type="button" value="选择索引值为奇数 的div元素." id="btn4" />
$("#btn4").click(function () {
$("div:odd").css("background-color", "#00A")
});
// <input type="button" value="选择索引值等于3的div元素." id="btn5" />
$("#btn5").click(function () {
$("div:eq(3)").css("background-color", "#a0A");
});
// <input type="button" value="选择索引值大于3的div元素." id="btn6" />
$("#btn6").click(function () {
$("div:gt(3)").css("background-color", "#666")
});
/* $("#btn6").click(function () {
$("div:gt(3)").css("background-color","#666");
});*/
// <input type="button" value="选择class不为one的 所有div元素." id="btn7" />
$("#btn7").click(function () {
$("div:not('.one')").css("background-color", "#dff")
});
});
</script>
3.5 表单属性选择器
3.5.1 语法
选择器名称 | 语法 | 解释 |
---|---|---|
可用元素选择器 | :enabled | 获取可用元素 |
不可用元素选择器 | :disabled | 获取不可用元素 |
选中选择器 | :checked | 获得单选/复选框选中的元素 |
选中选择器 | :selected | 获得下拉框选中的元素 |
- 代码实现:
<script type="text/javascript">
$(function () {
//<button id="btn1">对表单内 可用input 赋值操作.</button>
$("#btn1").click(function () {
$("input:enabled").val("这个输入框可以使用....")
});
//<button id="btn2">对表单内 不可用input 赋值操作.</button>
$("#btn2").click(function () {
$("input:disabled").val("这个输入框不可以使用....")
});
//<button id="btn3">获取多选框选中的个数.</button>.
$("#btn3").click(function () {
alert($("input:checked").length);
});
//<button id="btn4">获取下拉框选中的个数.</button>
$("#btn4").click(function () {
alert($("select>option:selected").length);
});
});
</script>
四、jQuery的DOM操作
4.1 jQuery对DOM树中的文本和值进行操作
4.1.1 语法
- val() :对value属性的操作
- jq对象.val(); 获取value属性的值
- jq对象.val(“值”); 设置value属性的值
- html() :对标签体的操作(等同于js的innerHTML属性)
-
- jq对象.html(); 获取标签体的内容
-
- jq对象.html(“值”); 设置标签体的内容
- text() :对标签体的操作(等同于js的innerText属性)
-
- jq对象.text();获取标签体的内容
-
- jq对象.text(“值”); 设置标签体的内容
4.1.2 html和text区别
- 设置内容: html可以将内容解析,text只是作为普通文本
- 获取内容: html获取所有源码内容,text只是获取文本内容
- 代码实现:
<script type="text/javascript">
$(document).ready(function () {
//1 获取 username的value属性的值
//alert($("input[name]")); 获取的是一个地址值
var $userObj = $("input[name=\"username\"]");
//alert($userObj.val())
//2 设置 username的默认值为"许多多"
//$userObj.val("xuduoduo");
//3通过html获取div标签体的内容
var $div = $("div");
//alert($div.html());
//4通过html设置div标签体的内容
//$div.html("hahhaha");
//5通过text获取div标签体的内容
alert($div.text());
//6通过text设置div标签体的内容
$div.text("enenenene");
//7 两者设置值的区别
/*
html: 设置内容时,如果内容中有html代码,HTML代码会被解析
$div.html("<h1>已满18,请戴眼镜.</h1>");
text: 设置内容时,如果内容中有html代码,HTML代码不会被解析
$div.text("<h1>已满18,请戴眼镜.</h1>");
*/
//8 两者获取值的区别
/*
html: 获取标签体内容时,获取的是所有内容
alert($div.html());
text: 获取标签体内容时,获取的仅仅是标签体的文本信息
alert($div.text());
*/
});
</script>
4.1.3 文档处理
4.1.3.1 内部插入
-
append:
-
a.append(c): 将c插入到a的内部的后面
-
prepend:
-
a.prepend(c ) 将c插入到a的内部的前面
<script type="text/javascript">
$(document).ready(function() {
var $city=$("#city");
var $fk=$("#fk");
//1.在city内部的后面追加 反恐
//$city.append($fk);
//2.在city内部的前面插入 反恐
$city.prepend($fk)
});
</script>
4.1.3.2 外部插入
- after: a.after(c ) 将c插入到a的后面
- before a.before(c ) 将c插入到a的前面
- 代码实现:
<script type="text/javascript">
$(document).ready(function() {
//获取操作对象
var $city=$("#city")
var $p2=$("#p2");
//1.在 p2 的后面插入 city
//$p2.after($city)
//2.在 p2 的前面插入 city
$p2.before($city)
});
</script>
4.1.3.3 删除
- empty(): 清空元素 (清空所有的子标签)
- remove(): 移除 (自杀)
- 代码实现:
<script type="text/javascript">
$(document).ready(function () {
//1.清空ul
//$("#city").empty();
//2.移除ul
$("#city").remove();
});
</script>
4.2 jQuery对DOM树中的属性进行操作
4.2.1 语法
-
attr(): 设置/获取元素的属性
-
设置属性(给标签添加属性)
-
- 设置单个属性
-
jq对象.attr({“属性名”,“值”});
-
- 设置多个属性
jq对象.attr({
“属性”:“值”
“属性”:“值”
});
- 设置多个属性
-
- 获取属性的值
jq对象.attr(“属性名”);
-
- 移除属性(删除属性)
jq对象.removeAttr(“属性名”);
- prop(): 使用方式和attr一样,优先使用attr方法,若attr方法不能用,换prop方法(版本升级后的产物)
checked 和 selected 使用prop获取
4.3 jQuery对class进行操作
4.3.1 class操作
- 元素.addClass(“属性值”);添加
- 元素.removeClass();移除指定样式
- 元素.toggleClass(“属性值”);有class属性就删除,没有则删除。
4.3.2 css样式
-
设置css样式:
-
- 格式一:设置单个属性
-
jq对象.attr({"属性名","值"});
-
- 格式二:设置多个属性
-
jq对象.attr({ "属性":"值" "属性":"值" });
-
- 获取css样式的值
-
jq对象.css("属性名称");
-
获取元素的宽和高:
-
jq对象.width()
-
jq对象.height()
-
案例实现:
<style type="text/css">
.textClass {
background-color: #ff0;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
//获取对象
var $user = $("input[name=\"username\"]");
//1给username添加title属性
$user.attr("title", "这是用户名输入框。。。");
//2获取username的title属性
//alert($user.attr("title"))
//3给username添加value和class属性
$user.attr({
"value": "saber",
"class": "textclass"
});
//4删除username的class属性
$user.removeAttr("class");
//5给username添加一个名为textClass的样式
$user.addClass("textClass");
//6删除username的名为textClass的样式
$user.removeClass();
$user.toggleClass("textClass");
$user.toggleClass("textClass");
});
</script>
五、 案例一:隔行换色
- 代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.odd {
background-color: #BCD68D;
}
.even {
background-color: #FFFFCC;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
//编写页面加载成功事件
$(function () {
//获取所有的tr属性值
// var $tr=$("tr");
$("tr:gt(0):even").css("background-color", "#BCD68D")
$("tr:gt(0):odd").css("background-color", "#FFFFCC")
});
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr style="background-color: #999999;">
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
六、案例二:全选全不选
- 代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//获取头部复选框的状态,并添加点击事件
$("#selectAll").click(function () {
//var flag = $("#selectAll").prop("checked");
var falg = $(this).prop("checked");
//获取其他复选框,并设置状态
$(".itemSelect").prop("checked", falg);
});
})
</script>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<td colspan="5"><input type="button" value="添加"/> <input type="button" value="删除"></td>
</tr>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
</table>
</body>
</html>
七、 案例三:QQ表情的选择
- 代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>QQ表情选择</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.emoji {
margin: 50px;
}
ul {
overflow: hidden;
}
li {
float: left;
width: 48px;
height: 48px;
cursor: pointer;
}
.emoji img {
cursor: pointer;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//1.页面加载成功后,给图片添加点击事件
$("ul>li>img").click(function () {
// $(".word").append($("").clone());
//克隆当前标签对象
$(".word").append($(this).clone());
});
})
</script>
</head>
<body>
<div class="emoji">
<ul>
<li><img src="../img/01.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/02.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/03.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/04.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/05.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/06.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/07.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/08.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/09.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/10.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/11.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/12.gif" height="22" width="22" alt=""/></li>
</ul>
<p class="word">
<strong>请发言:</strong>
<img src="../img/12.gif" height="22" width="22" alt=""/>
</p>
</div>
</body>
</html>