jQuery基础

最新推荐文章于 2021-05-31 13:23:44 发布

扶苏工子

最新推荐文章于 2021-05-31 13:23:44 发布

阅读量278

点赞数

分类专栏：前端文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_44378338/article/details/113702883

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.jQuery介绍

1.1jQuery能做什么？

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合

JavaScript与jQuery，之间的关系相当于，成语和白话文解释之间的关系，jQuery相当于成语，Javascript相当于白话文解释。

1.2 jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性

$("tr:even").css("background-color","#ccc");

2 jQuery的使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突

在页面中使用传统引入js文件的方式引入即可。

2.1 基本的语法介绍

说明：

工厂函数 $() ：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素（没错，用法基本上和css一致）
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“ jQuery ”
例如：

<script src="js/jquery-3.4.1.min.js"></script>
<script>
$(selector).action();
</script>

2.2 jQuery对象与DOM对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

<script>
        //js
       var s =  document.getElementById("title").innerHTML;
      // alert(s);

       //jq
       alert($("p").html());
    </script>

想混用，要转换


<script src="js/jquery-3.4.1.min.js"></script>
    <p id="title">hello,jQuery!</p>
    <script>
        //js对象--->jq对象
       var js =  document.getElementById("title");//s是js对象
       var jq = $(js);
      // alert(jq.html());
      
       //jq对象--->js对象
       var jsdom = jq.get(0);
       alert(jsdom.innerHTML);
    </script>

2.3 选择器

2.3.1 基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

在这里插入图片描述

<p>中国和</p>
    <p id="one">世界</p>
    <p>加油</p>
    <p class="two">大家</p>
    <h2 id="one">法师</h2>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
      //标签选择器
      //$("p").css("color","red");

      //id选择器,具有唯一性
      //$("#one").css("color","red")//当id相同时只能选择一个标签

      //类选择器
       //$(".two").css("color","red")

       //并集选择器，选择id是one,类是two的标签
        //$("#one,.two").css("color","red")
        
       //交集选择器
        $("h2#one").css("color","red")//选择即是h2,id又是one标签
      
    </script>

2.3.2 层次选择器

在这里插入图片描述

<h3> 000 </h3>
<div id="x">
111
<p>p1</p>
<div>
<p>p2</p>
</div>
</div>
<h3> 222 </h3>
<h3> 333 </h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("#x p").css("color","red"); // 后代选择器，忽略层级
//$("#x>p").css("color","red"); // 子代选择器，只负责子级
//$("#x+h3").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟h
$("#x~h3").css("color","red"); // 同辈元素选择器，下面的所有兄弟h
</script>

2.3.3 属性选择器

在这里插入图片描述

<a href="www.lagou.com">拉勾网</a>
<a href="www.sina.com.cn">新浪网</a>
<a href="<http://www.163.com>">网易</a>
<p href="x">哈哈 1 </p>
<p href="x" title="x">哈哈 2 </p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("[href]").css("color","red"); // 选取拥有href属性的元素
//$("[href='x']").css("color","red"); // 选取拥有href=x的元素
//$("a[href!='x']").css("color","red"); // 选取a标签中href不等于x的元素
//$("[href^='www']").css("color","red"); // 选取href属性以www开头的元素
//$("[href$='com']").css("color","red"); // 选取href属性以com结尾的元素
//$("[href*='a']").css("color","red"); // 选取href属性包含a的元素
$("p[href][title='x']").css("color","red"); // 选取拥有href属性和title属性，并
且title=x的p元素
</script>

2.3.4 过滤选择器

在这里插入图片描述

<h2 id="h2#x">修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("li:first").css("color","red"); // 第一个li
//$("li:last").css("color","red"); // 最后一个li
//$("li:even").css("color","red"); // 偶数行的li
//$("li:odd").css("color","red"); // 奇数行的li
//$("li:eq(2)").css("color","red"); // 下标为 2 的li
//$("li:gt(1)").css("color","red"); // 下标大于 1 的li
//$("li:lt(2)").css("color","red"); // 下标小于 2 的li
$("#h2\\\\#x").css("color","red"); // 使用转义符
</script>

2.4 事件

2.4.1 鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：

在这里插入图片描述

<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("img").click( function(){
//点击一下，换照片
$(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头
} );
$("img").mouseover( function(){ //移动到元素上
$(this).css( "border","2px solid red" );
} );
$("img").mouseout( function(){ //离开元素
$(this).css( "border","2px solid white" );
} );
</script>

2.4.2 键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：

在这里插入图片描述

<input>
<h3></h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("input").keyup( function(){
var str = $(this).val(); // 获取框中的值
$("h3").text( str ); // 将h3元素中的文本内容更改为str
} );
</script>

2.4.3 表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：

在这里插入图片描述

<form action="">
<p>帐号: <input id="a" value="请输入帐号..."> </p>
<p>电话: <input id="b"> </p>
</form>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//获得焦点（激活/点击一下）
$("#a").focus(function(){
$(this).val("");
});
//失去焦点（未激活/未点击）
$("#a").blur(function(){
$(this).val("请输入帐号...");
});
</script>

2.4.4 鼠标悬停复合事件

hover()方法相当于mouseover与mouseout事件的组合

<img src="img/3.jpg" width="400">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("img").hover(
function(){
$(this).css("border","5px solid red");
},
function(){
$(this).css("border","5px solid white");
}
);
</script>

2.4.5 连续点击复合事件

toggle()除了可以模拟鼠标的连续单击事件

<h2>修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("h2").click(function(){
$("ul").toggle(); // 连续点击，ul的可见和隐藏进行切换
});
</script>

2.4.6 事件的动态绑定

对dom元素绑定事件的另一种写法

绑定一个事件

$(".del").on('click', function() {
alert('hello');
})

绑定多个事件

$(".del").on('click mouseover', function() {
alert('hello');
})

2.5 元素的隐藏和显示

2.5.1 改变元素的宽和高（带动画效果）

show( speed )：显示
hide( speed )：隐藏
toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>
div{
width: 200px;
height: 200px;
background-color: black;
}
</style>
<body>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">切换</button>
<div></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn2").click(function(){
//fast:快速的
//slow:缓慢的
//毫秒：自定义
$("div").hide( 2000 );
});
$("#btn1").click(function(){
$("div").show('slow');
});
$("#btn3").click(function(){
$("div").toggle( 1000 );
});
</script>
</body>

2.5.2 改变元素的高（拉伸效果）

slideDown( speed ) ：显示
slideUp( speed )：隐藏
slideToggle( speed )等价于slideDown+slideUp

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<script>
$("#btn2").click(function(){
$("div").slideUp( 1000 ); //向上收缩
});
$("#btn1").click(function(){
$("div").slideDown( 1000 ); //向下伸展
});
$("#btn3").click(function(){
$("div").slideToggle( 1000 ); //切换
});
</script>

2.5.3 不改变元素的大小（淡入淡出效果）

fadeIn( speed ) 显示
fadeOut( speed ) 隐藏
fadeToggle( speed ) 等价于fadeIn+fadeOut动画
fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<script>
$("#btn2").click(function(){
$("div").fadeOut( 1000 ); // 隐藏：淡出我的视线
});
$("#btn1").click(function(){
$("div").fadeIn( 1000 ); // 显示：映入眼帘
});
$("#btn3").click(function(){
$("div").fadeToggle( 1000 ); // 切换
});
$("#btn4").click(function(){
$("div").fadeTo( 1000 ,0.5); // 1秒内变成50%的透明度
});
</script>

2.5.4 链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起；

例如：点击一次按钮，让div完成 4 个指定动作

1. 背景变粉
2. 字体变绿
3. 收缩
4. 拉伸

<style>
div{
width: 200px;
height: 200px;
background-color: black;
color:white;
font-size: 3em;
}
</style>
<body>
<button>试试</button>
<div>hello</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
$("div").css("background-
color","pink").css("color","green").slideUp( 1000 ).slideDown( 1000 );
});
</script>
</body>

2.6 DOM和CSS的操作

2.6.1 属性函数

attr( “属性” ); 获得元素的属性值
attr( “属性” , “新值” ); 修改元素的属性值
attr( 样式参数 ) ：样式参数可以写成json格式

<body>
<button id="btn1">点我试试</button>
<hr>
<img src="img/1.jpg" title="美女大图" width="300">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn1").click(function(){
$("img").attr("src","img/2.jpg");
$("img").attr("title","高清无码");
$("img").attr( {width:"200",height:"200"} );
});
</script>
</body>

val() ; 获得表单元素中的value值
val(“x”) 修改表单元素中的value值
html(); 获得元素中的内容（标签+文本）
html(“x”) 修改元素中的内容（标签+文本）
text(); 获得元素中的文本
text(“x”) 修改元素中的文本

<button>试试</button>
<hr>
<input id="username">
<div>
<h1><i>中国加油！</i></h1>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//alert($("input").val()); //input框中的值
//$("input").val("哈哈哈"); //修改input框中的值
//alert( $("div").html() ); //获得div中的内容（包含标签信息）
//alert( $("div").text() ); //获得div中的内容（不包含标签信息，只包含文本内容）
$("div").text("祖国万岁！"); //修改div中的内容（全部内容都覆盖）
});
</script>

2.6.2 样式函数

css( “属性”); 获得该属性值
css( “属性”,“值”); 设置属性的值
css( { json} ); 设置多个属性的值

<style>
div{
width: 150px;
height: 150px;
background-color: #000;
}
</style>
<body>
<button>试试</button>
<hr>
<div></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//var w = $("div").css("width"); // 获取css属性，width的值
//1.一个键值对
//$("div").css("background-color","pink");
//2.链式编程
//$("div").css("background-color","pink").css("borderradius","50%");
//3.json为参数
$("div").css({
opacity:"0.4",
background:"orange",
borderRadius:"50%"
} );
});
</script>
</body>

width(); 获得元素的宽度
width( number ); 修改元素的宽度
height(); 获得元素的高度
height( number ); 修改元素的高度

<style>
div{
width: 150px;
height: 150px;
background-color: #000;
}
</style>
<body>
<button>试试</button>
<hr>
<div></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
var w = $("div").width(); // （无参）获取宽度
var h = $("div").height();// （无参）获取高度
// alert("宽:"+w+"px，高:"+h+"px");
$("div").width("300"); // （传参）修改宽度
$("div").height("300"); //（传参）修改高度
});
</script>
</body>

2.6.3 类样式函数

addClass(); 为元素添加类样式
removeClass(); 将元素的类样式移除
toggleClass(); 样式的切换（有->无，无->有）

<style>
div{
width: 100px;
height: 100px;
background-color: #000;
}
.a{
background: palevioletred;
border-radius: 50%;
}
.b{
border:5px dashed darkcyan;
opacity: 0.6;
}
.cn{
background: #000;
color:#FFF;
font-family: 字魂49号-逍遥行书;
}
</style>
<body>
<button id="btn1">试试</button>
<button id="btn2">取消透明度</button>
<button id="btn3">样式切换</button>
<hr>
<div></div>
<h1>中华人民共和国，万岁！</h1>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn1").click(function(){
// $("div").addClass("a");
$("div").addClass("a b");
});
$("#btn2").click(function(){
$("div").removeClass("b");
});
$("#btn3").click(function(){
$("h1").toggleClass("cn");
});
</script>
</body>

2.6.4 节点操作

创建节点

       ⭐**工厂函数$()用于获取或创建节点**

插入节点
```
       ⭐**插入子节点**
```

在这里插入图片描述

插入同辈节点

在这里插入图片描述

替换节点
⭐replaceWith()
⭐replaceAll()
复制节点
⭐clone()
删除节点
⭐remove()删除整个节点
⭐empty()清空节点内容

<input> <button id="test">测试</button>
<ul>
<li>金瓶梅</li>
<li>貂蝉往事</li>
<li>东京热不热</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#test").click(function(){
var bookname = $("input").val();
var newli = $("<li>"+bookname+"</li>"); //通过工厂函数，创建新的li节点

/*添加子节点*/
//$("ul").append(newli); // newli添加到ul后面
//newli.appendTo("ul"); // newli添加到ul后面
//$("ul").prepend(newli); // newli添加到ul前面
//newli.prependTo("ul");

/*添加同辈节点*/
//$("li:last").after( newli ); // newli添加到最后的li的后面
//newli.insertAfter("li:last");
//$("li:last").before(newli); //newli添加到最后的li的前面
//newli.insertBefore("li:last");

/*替换节点*/
//$("li:eq(1)").replaceWith(newli); // 将第二个li替换成newli
//newli.replaceAll( "li:eq(1)" );

/*复制节点*/
//$("li:first").clone().insertAfter("li:last"); // 复制第一个li，并插入到最
后一个li的后面

/*删除节点*/
//$("li:eq(1)").empty(); // 清空了节点上的文本（节点并没有消失）
$("li:eq(1)").remove(); //删除节点
});
</script>

2.7 遍历节点

2.7.1 祖先元素

用于向上遍历 DOM 树的方法

parent() 返回被选元素的直接父元素，仅仅是上一级（找爸爸）
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

<p><button>测试</button></p>
<ul>
<li>a</li>
<li>
<b>b</b>
</li>
<li>c</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//var x = $("b").parent().html(); // 找爸爸
//var x = $("b").parents("ul").html(); // 找祖宗 ul
//var x = $("b").parents("body").html(); // 找祖宗 body
alert( x );
});
</script>

2.7.2 同辈元素

next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素

<button>测试</button>
<p>p1</p>
<ul>
<li>a</li>
<li>
<b>b</b>
</li>
<li>c</li>
</ul>
<p>p2</p>
<p id="x">p3</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//var x = $("ul").next().text(); // 紧邻的下一个元素
//var x = $("ul").prev().text(); // 紧邻的上一个元素
//var x = $("ul").siblings("#x").text(); // 所有的兄弟中，id=x的
var arr = $("ul").siblings();  // ul的所有兄弟,1个button， 3 个p， 2 个script
for(var i = 0 ;i< arr.length ;i++){
alert(arr[i]);
}
});
</script>

2.7.3 后代元素

后代是子、孙、曾孙等等

children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”

<button>测试</button>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//var x = $("ul").children().text(); //所有子节点：abc
var x = $("ul").children("li:first").text();  //ul中的第一个子节点
alert(x);
});
</script>

find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。

<button>测试</button>
<ul>
<li>盘古</li>
<li>蚩尤</li>
<li>刑天
<p>龚工</p>
</li>
<h3>祝融</h3>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//var x = $("ul").find("p").text(); //在ul中查找p元素，忽略层级
//var x = $("ul").find("h3").text(); //在ul中查找h3元素，忽略层级
var x = $("ul").find().text(); // 找什么？不知道！
alert(x);
});
</script>

2.7.4 元素的过滤

first()：过滤第一个元素
last()：过滤最后一个元素
eq(index)：过滤到下标为index的元素
not()：除了什么之外的元素
is()：返回布尔，判断是不是这种元素

<button>测试</button>
<ul>
<li>盘古</li>
<li>蚩尤</li>
<li>刑天</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function(){
//var x = $("li").first().text(); // 第一个li
//var x = $("li").last().text(); // 最后一个li
//var x = $("li").eq(1).text(); // 下标为 1 的li
//var x = $("li").not("li:eq(1)").text(); // 除了下标为 1 的其余所有li
var x = $("li").parent().is("ul"); // 返回布尔型，li的父节点是不是ul
alert(x);
});
</script>

3 案例

3.1 手风琴特效

<style>
dd{
display: none; /*隐藏元素*/
}
</style>
<body>
<nav>
<header>拉勾网</header>
<ul>
<li>
<dl>
<dt>求职</dt>
<dd>1.简历</dd>
<dd>2.面试</dd>
<dd>3.入职</dd>
</dl>
</li>
<li>
<dl>
<dt>教育</dt>
<dd>1.看视频</dd>
<dd>2.做作业</dd>
<dd>3.24小时在线辅导</dd>
</dl>
</li>
<li>
<dl>
<dt>3W创业</dt>
<dd>1.帮助小企业</dd>
<dd>2.头脑风暴</dd>
<dd>3.赚钱啦</dd>
</dl>
</li>
</ul>
</nav>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("nav dt").click(function(){
//所有的dd全部都闭合上，除了自己的兄弟
$("dd").not( $(this).siblings() ).slideUp( 500 );
// 自己的兄弟进行切换，显示闭合上，闭合的显示出来
$(this).siblings().slideToggle( 500 );
});
</script>
</body>

3.2 购物车结算

在这里插入图片描述

<style>
   .jian,.jia {
       border: 1px solid #999;
       display:inline-block;
       width: 20px;
       height: 20px;
       text-align: center;
       text-decoration: none;
       color:#999;

    }
</style>
<body>
    <table border="1" cellspacing="0">
        <tr>
            <td>商品编号</td>
            <td>名称</td>
            <td>单价</td>
            <td>数量</td>
            <td>总价</td>
        </tr>
        <tr>
            <td>1</td>
            <td>炸香肠</td>
            <td>3</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>王八</td>
            <td>10</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>10</td>
        </tr>
        <tr>
            <td>3</td>
            <td>恐龙</td>
            <td>1000</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
        </td>
            <td>1000</td>
        </tr>
    </table>
    <p style="width: 400px;text-align: center;">
        总价：<b style="color: red;">1013</b><button>提交订单</button>
    </p>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/shopcar.js"></script>
</body>

//加
$(".jia").click(function(){
    /**实现数量加1 */
    //先获取span标签的值再加一
   var a = $(this).prev().text();
   a++;
   //再修改span标签的值位加一之后的
   $(this).prev().text(a);

  /*实现计算总价*/ 
   //商品数量的父元素的前一个兄弟元素就是单价，用单价乘数量得到总价
   var price =  $(this).parent().prev().text();
   var zong = price*a;

   //把总价修改成新计算的总价
   $(this).parent().next().text(zong);

   //调用计算所有商品总价方法
   getzong();
   
})

//减
$(".jian").click(function(){
    /**实现数量减1 */
    //先获取span标签的值再减一
   var a = $(this).next().text();
   a--;
   //当数量为零的时候，提示用户是否删除把商品移除购物车
   if(a == 0){
   if(confirm("是否删除商品？")){
       $(this).parents("tr").remove();
   }
  } else{
   //再修改span标签的值位加一之后的
   $(this).next().text(a);

   /*实现计算总价*/ 
   //商品数量的父元素的前一个兄弟元素就是单价，用单价乘数量得到总价
   var price =  $(this).parent().prev().text();
   var zong = price*a;

   //把总价修改成新计算的总价
   $(this).parent().next().text(zong);

     //调用计算所有商品总价方法
        getzong();

}
});

//计算所有商品的总价
// function getzong(){
//       var sum = 0;
//       //获取总价一列的后三个单元格的值
//      var arr =  $("tr:not(tr:first)").find("td:last");

//      for(var i = 0;i < arr.length; i++){
//          sum += Number(arr[i].innerHTML);
//      }

//      $("b").text(sum);}

function getzong(){
    var sum = 0;
    $("tr:not(tr:first)").find("td:last").each(function(){
        sum += Number($(this).text());
    })
    $("b").text(sum);
}