一、初识jQuery
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
二、jQuery 的功能概括为：
// 先引入后使用
// 语法结构 / 通用格式
// $(AAA).BBB(CCC)
// AAA = jq选择器
// BBB = jq对象.方法名
1、html 的元素选取
DOM = Document Object Model（文档对象模型）
text() – 设置或返回所选元素的文本内容
html() – 设置或返回所选元素的内容（包括 HTML 标记）
val() – 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
获取属性 – attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
$("button").click(function(){
alert($("#w3s").attr("href"));
});
实操：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2</title>
</head>
<body>
<button onclick="test1()">button</button>
<div id="id_a" class="class_a" name="name_a">
<span>AAA</span>
</div>
<script src="../Demo211224/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8">
</script>
<script>
function test1(){// css选择器 =id/class/tag/attr
// var dom1 = document.getElementById('id_a');
var jq1 = $("id_a"); // 通过id
// var jq2 = $("class_a"); // 通过class名
// var jq3 = $("div"); // 通过标签名
// var jq4 = $("[name='name_a']"); // 通过name名
// var html = jq1.html(); // innerHtml
// jq1.html("<input type = 'text/'>ccc")
// alert(html)
// var text = jq1.text(); // innerText
// jq1.html("<input type = 'text/'>ccc")
// alert(text)
// var jq1 = $("div");
// jq1.html(function(index,html){ // function 可以得到第几个 也可以得到第几个的 还可以改变它的数值内容
// alert(index + "---" + html) // index 找到第几个的标签（下标从0开始，依次输出）
// return index +"---" +html // 改变数值
// })
// var jq1 = $("div");
// var html = $("div")
// var html = jq1.html();
// alert(html) // 找第一个
var jql
// 无参数 描述: 返回p元素的内容。
// jQuery 代码:
$('p').html();
// 参数val 描述:设置所有 p 元素的内容
// jQuery 代码:
$("p").html("Hello <b>world</b>!");
// 回调函数描述:使用函数来设置所有匹配元素的内容。
// jQuery 代码:
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
// 总结html 以上
// 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
// 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。
// 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
}
</script>
</body>
</html>
2、html的元素操作
设置内容 – text()、html() 以及 val()
- text() – 设置或返回所选元素的文本内容
- html() – 设置或返回所选元素的内容（包括 HTML 标记）
- val() – 设置或返回表单字段的值
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始
（旧的） 值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html()：
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使
用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
实操：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3</title>
</head>
<body>
标签属性
常规属性 attr(简单记 大概率不会出错)
<button onclick="test()"> button</button>
<img src="../../img/1.jpeg">
表单属性 prop
value属性 既不用attr也不用prop 只能用val
<input type="text" value>
<input type="checkbox" value>
<input type="checkbox" value>
<script src="../Demo211224/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
// function test(){
// var img = $("img");
// var src = img.attr('src'); // 获取某个标签的属性
// alert(src)
// img.attr("src","../../img/1.jpeg") // 设置某个属性
// var obj = {src:'../../img/1.jpeg',width:'300px',height:'400px'};
// img.attr(obj)// 设置多个属性
// img.attr('src',function(index,demo){ // function 获取
// alert(index+"=="+demo)
// return '../../img/1.jpeg';
// })
// }
// function test1(){
// var inputs = $("input[type ='text']");
// alert(inputs.prop('checked')) // 直到当前标签是否被选中 true/false
// inputs.prop('checked',true) // 设置多个 获取一个
// }
function test2(){
var inputs = inputs.val(); //不传参就是获取
var val = inputs.val(); // val 用来获取value属性的值 html/text
alert(val)
inputs.val("asdasas");
}
</script>
</body>
</html>
3、css操作
addClass() – 向被选元素添加一个或多个类
removeClass() – 从被选元素删除一个或多个类
toggleClass() – 对被选元素进行添加/删除类的切换操作
css() – 设置或返回样式属性
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
也可以在 addClass() 方法中规定多个类：
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass() 方法
下面的例子演示如何不同的元素中删除指定的 class 属性：
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
实操：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>4</title>
<style type="text/css">
.class_a{background-color: #00FFFF;}
.class_b{font-size: 40px;}
</style>
</head>
<body>
<button onclick="test()">button</button>
<div> AAA</div>
<script src="../Demo211224/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function test(){
var jq_div = $('div');
// jq_div.css("color","red");// 两个参数是赋值
// alert(jq_div.css('color'));// 一个参数时获取
// jq_div.css({"color":"red","background":"blue"});
// jq_div.css('heigth':function(index,value){ // 方法的方式
// return "";
// })
jq_div.addClass('class_a class_b'); // 可以加多个属性 中间用空格分隔
// 未写完 $("button").click(function(){
// $("p:first").addClass("class_a");
// });
jq_div.addClass(function(){
})// 也存在方法方式
jq_div.removeClass('class_a')// 清空样式
jq_div.toggClass('class_a') // 切换样式 （有就删 没有就加）
}
</script>
</body>
</html>
4、html事件操作
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件”触发”（或”激发”）经常会被使用。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
5、html dom遍历和修改
实操：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>6</title>
<script src="../Demo211224/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<button onclick="test()">button</button>
<script>
function test(){// 对象遍历 类似于java 动态实例方法
$("div").each(function(index,element){// element 每个标签对应的dom对象
// alert(index+"---"+element)
// console.log(element)// element 每个标签对应的dom对象
// console.log(&(element).html()) // 每个标签对应的内容
// console.log(&(this).html()) // 等价于上面
// this dom对象 和elemen是同一个
})
// 遍历
// 只存在结构上不同 功能相同
//$.each();// 等价于 自己的得到的 类似于java中静态方法
// each 传入的是一个（回调）方法
//jQuery.each();// 等价于 预先js文件中给出的 类似于java中实例方法
// each 传入的是一个数组 和 一个(回调)方法 两个参数
// 数组遍历 类似于java静态方法
$.each([1,2,3,4],function(i,e){// i数组下标 e 数组中每一个元素
alert(i+"--"+e)
});
}
</script>
</body>
</html>
6、js特效和动画效果
jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
$("button").click(function(){
$("p").hide(1000);
});
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
$("button").click(function(){
$("p").toggle();
});
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
实操：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>7</title>
<script src="../Demo211224/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8">
</script>
</head>
<body>
<button onclick="test_hide()">隐藏</button>
<button onclick="test_show()">显示</button>
<button onclick="test_toggle()">切换</button>
<div style="border: 1px solid red;">assd</div>
<button onclick="test()">test</button>
<span style="position: absolute; border: 1px solid blue;">12345 </span>
<script>
function test(){
$("span").animate({ // 为span 添加动画 需要加绝对定位
top:"200px",
left:"300px"
},5000)
// $("div").animate({ // 为div 添加动画
// width:'70%',
// height:'200px',
// fontSize:'50px',
// borderTopWidth:'10px',
// marginLeft:'20px',
// paddingTop:"100px"
// },2000)
}
function test_hide(){
// $("div").hide(3000);// 隐藏 慢动作 经过5000毫秒隐藏
// $("div").hide(5000,function(){ // 隐藏完之后会执行的效果
// alert(123)
//});
$("div").fadeTo(3000,0.4); // 透明度 显现
}
function test_show(){ // 显示
// $("div").show(5000);// 显示
// $("div").slideUp(7000);// slideUp向上收回 slideDown向上收回 高度变化（向上减小）来动态地隐藏所有匹配的元素
// $("div").fadeOut(7000); // fadeOut渐渐淡出 fadeIn 渐入/渐进
$("div").fadeOut(3000); // 透明度 消失
}
function test_toggle(){ // 进行隐藏和显示之间的切换
$("div").toggle(4000);
// $("div").fadeIn(3000); // 透明度 显现
}
// 以上三种方式 都不会占用空间 属于 display(隐藏后原有空间仍不占有)
// 如果要实现visibility（隐藏后原有空间仍占有） 需要使用样式 来完成
</script>
</body>
</html>
7、ajax异步请求方式（待更）
三、总结
jQuery还是好用的 YYDS 可以省很多事 降低耦合 提高代码复用 ，明天继续，加油！！
If not now, when? If not me, who? “时不我待，舍我其谁。”
Original: https://www.cnblogs.com/xmczrj/p/15729551.html
Author: 小码成长日记
Title: 前端（jQuery） 5
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/573488/
转载文章受原作者版权保护。转载请注明原作者出处！