文章目录
1 jq-01基础
1.1 jQuery简介
什么是jQuery
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库包含以下功能:
HTML 元素
选取HTML 元素
操作CSS
操作HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Jquery就是封装好的js 本质上还是js
1.2 jQuery使用
1.搭建jQuery环境
2 jQuery语法:
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法:
$(selector).action()
jQuery(selector).action()
美元符号定义 jQuery
选择符(selector)“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
jQuery选择器 主要用来获取元素对象
3.jQuery属性操作
上述方法,如果括号中带有参数那么就表示 设置/修改属性如果括号中不写参数:就表示获取数据
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
</head>
<body>
<div id="abc">
sdcsdc
<div id="dd">
sdc
</div>
<div id="cc">
ee
</div>
<span>23232323
<span>lllllllll</span></span>
<span>sdcscsdwc</span>
<span>hnyghnynhtyn</span>
</div>
<script type="text/javascript">
// console.log($("#abc")) > 子元素 空格 所有的后代元素
console.log($("#abc>span").length)
console.log($("#abc div").length)
</script>
</body>
</html>
attr()/prop()-法也用于设置/改变属性值。
这两个方法作用一样,一般来说 可以使用attr() 来操作标签中自定义的属性,prop()一般用来操作标签中本身自带的属性例如(id,class name,value),自定义的属性 使用prop无法操作;
hide()–隐藏 ===》display:none;
show()–显示 ===》display:block/inline;
4 jQuery对象的遍历,要注意js对象和jQuery对象的区别和转换
全选<input type="checkbox" name="" id="all" value="" onclick="ad()"/>
1<input type="checkbox" name="" id="" value="" />
2<input type="checkbox" name="" id="" value="" />
<script type="text/javascript">
function ad(){
let als = $("#all").prop("checked");
let ck = $(":checkbox");
ck.each(function(){
$(this).prop("checked",als);
})
}
</script>
$(“选择器”)——获取的jquery对象。
jquery对象是对js对象的封装。一个jquery对象中封装了0 1 或者多个js对象。里边含有一个js对象的数组。
jquery对象是jquery封装后的对象,不能使用js的属性和方法。
js转换成jquery:
$(js对象)—返回时jquery对象
jquery转换成js:
jquery对象[下标]–返回的是js对象 jquery对象.get(下标)
5 jQuery操作CSS样式
6 jQuery事件绑定
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:在元素上移动鼠标。选取单选按钮点击元素事件的绑定三种方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
<style type="text/css">
span {
color: red;
display: none;
}
</style>
</head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return verify()">
用户名:<input type="text" name="" id="username" value="" onblur="userverify()" /><span id="usermsg"></span><br>
密码:<input type="password" name="" id="pwd" value="" onblur="pwdverify()" /><span id="pwdmsg"></span><br>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
function verify() {
if (userverify() & pwdverify()) {
return true;
}else{
return false;
}
}
function userverify() {
let zz = /^[0-9]+$/;
if (zz.test($("#username").val())) {
return true;
} else {
if ($("#username").val() == "") {
// alert($("#usermsg").text())
$("#usermsg").text("不能为空");
$("#usermsg").css("display","inline")
return false;
} else {
$("#usermsg").text("格式不正确");
$("#usermsg").css("display","inline")
return false;
}
}
}
function pwdverify() {
let zz = /^[0-9]+$/;
if (zz.test(pwd.value)) {
return true;
} else {
if ($("#pwd").val() == "") {
$("#pwdmsg").text("不能为空")
$("#pwdmsg").css("display","inline")
return false;
} else {
$("#pwdmsg").text("请输入数字");
$("#pwdmsg").css("display","inline")
return false;
}
}
}
</script>
</body>
</html>
jQ常用属性