jquery总结

最新推荐文章于 2021-12-06 08:55:36 发布

xixihaha_coder

最新推荐文章于 2021-12-06 08:55:36 发布

阅读量263

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/xixihaha_coder/article/details/119145860

jQuery 专栏收录该内容

1 篇文章

订阅专栏

初始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;