初始jQuery及公式
-
它是辅助JavaScript开发的js类库
-
公式: $(selector).action()
-
$是一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--在线引入jQuery-->
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
<script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
$('#test-jquery').click(function () {
alert("hello,jquery");
})
</script>
</body>
</html>
选择器
//原生js,选择器少,麻烦不好记
//标签
document.getE1ementsByTagName ();
//id
document.getE1ementsyId();
//类
document.getElementsByclassName();
//jQuery css 中的选择器它全部都能用!
s('p').c1ick(); //标签选择器
S('#id1').click(); //id选择器
s('.class1').click() //class选择器
s('.class1').click(function(){
alert('单击事件');
});
jQuery事件
页面载入
$(function(){
})
相当于
window.onload=function(){
}
jQuery中其他的事件处理方法:
click() 它可以绑定单击事件,以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件。
one() 使用上跟 bind一样。但是one方法绑定的事件只会响应一次。
unbind() 跟bind方法相反的操作,解除事件的绑定
live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效
操作DOM元素
节点文本操作
$('#test-u1 1i[name=python]').text();//获得值
$('#test-u1 1i[name=python]').text('设置值');//设置值
$('#test-u7').htm1();//获得值
$('#test-u7').htm1('<strong>123</strong>');//设置值
$("#username").val(); //获得值
$("#username").val("123456"); //给表单里name属性是username的输入框赋值
$('li:first').htm1('<strong>123</strong>');//li中的第一个li
$('li:last').htm1('<strong>123</strong>');//li中的最后一个li
$("tr:even") //1,3,5 奇数行
$("tr:odd") //偶数
$("div:has(.mini)") //选择含有class为mini元素的div元素
$("div[id]") //有id属性的div
$("input[name="username"]") //name属性=“username”
$("input[name!="username"]") //name属性!=“username”
$("input[name^="us"]") //以us 开头的name属性的input
$("input[name$="us"]") //以us 结尾的name属性input
$("input[name*="us"]") //含有us的name属性input
还有很多,需要什么就去查文档~
-
attr() 可以设置和获取属性的值,不推荐操作checked、readOnly、selected、disabled等等
- attr方法还可以操作非标准的属性。比如自定义属性: abc,bbj
-
prop()可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.js"></script>
</head>
<script type="text/javascript">
$(function () {
//attr
$(":checkbox:first").attr("name","abc");//设置
alert($(":checkbox:first").attr("name"));//获取
$(":checkbox:first").prop("checked",false);//设置
alert($(":checkbox:first").prop("checked"));
});
</script>
<body>
<br>
多选:
<input type="checkbox" name="checkbox" checked="checked" value="checkbox1">checkbox1
<input type="checkbox" name="checkbox" value="checkbox2">checkbox2
</body>
</html>
css的操作
$('#test-u1 1i [name=python]').css({"color","red3"})
addClass() 添加样式
removeClass(0) 删除样式
toggleclass() 有就删除,没有就添加样式。
offset() 获取和设置元素的坐标。
元素的显示和隐藏:本质 display : none
$('#test-u1 1i[name=python]').show()
$('#test-u1 1i[name=python]').hide()
提醒框(用到函数里面)
confirm("") //返回true 或者false
事件的冒泡
父和子绑定同一个事件,点子元素,父元素也会触发,这就叫时间的冒泡
如何阻止事件的冒泡?
在子函数中加 return false;