一：jQuery的工具方法有哪些？
1.$ 一个函数
是DOM中document.getElementById() 方法的一个便利的简写，$()就是一个普通的函数，如果使用报错了 $ is not deifned，就说明没有引入jQuery文件。
$(function(){});注意：参数传递不同，效果也不一样。
$(function(){}) 入口函数
$("") 选择器/创建一个标签
$(dom对象) js-->jQuery
2.jQuery文件结构 一个自执行函数
(function(){
window.jQuery = window.$ = jQuery
}());注意：dom对象：原生态js选择器获取到的选择器
jQuery对象：利用jQuery选择器获取到的对象。
dom元素与jQuery的转换
dom---->jQuery
var oDiv = document.getElementById('');
var $oDiv = $(oDiv)
jQuery--->1.dom 通过下标
var $div = $("#oDiv");
var div = $div[0];
2.使用jQuery的方法
var $div = $("#oDiv");
var div = $div.get(0);两种的关系： $即相当于jQuery，jQuery即相当于$，$使用的地方， 可以用jQuery 代替
3.$.each() 遍历数组对象，对象，对象数组中的数据
//求和
//定义一个数组
var array=[1,2,3,4,5,6,7,8,9,10];
//总和
var sum=0;
//遍历 $.each()
$.each(array,function(i,e){
console.log("下标:"+i,"数值:"+e);
sum+=e;
})
console.log("总和:"+sum);
//定义对象
var obj={
name:"刘邦",
sex:"男",
adress:"长安",
status:"汉高祖"
}
//遍历输出对象内容
$.each(obj,function(i,e){
console.log("属性名:"+i,"属性值:"+e);
}) 4.$.trim（）去除字符串左右空格
//trim 去除左右空格
var str=" 你好，世界 "
console.log($.trim(str));5.$.type(obj) 查看数据类型
var str=" 你好，世界 "
//type 查看数据类型
console.log($.type(str));//string 6.$.isArray(obj) 判断是否是数组
var str=" 你好，世界 "
//isArray 查看是否是数组
console.log($.isArray(str));//false
console.log($.isArray(array));//true7.$.toArray 将集合变成数组
// toArray 将集合变成数组
console.log($("input").toArray);8.isFunction() 判断是否是一个函数
//定义一个函数
function add(){
alert(123);
}
//isFunction 判断是否是一个函数
var fun=add
console.log($.isFunction(fun));//true9.JSON.stringify(obj) 将对象变成字符串
//JSON 将对象变成字符串（将字符串变成对象）
var goods={
name:"菠萝",
price:15
}
//将对象变成字符串
var js=JSON.stringify(goods)
console.log(js);//{"name":"菠萝","price":15}
console.log($.type(js))//string10.$.parseJSON(obj) 将字符串变成对象
//JSON 将对象变成字符串（将字符串变成对象）
var goods={
name:"菠萝",
price:15
}
//将对象变成字符串
var js=JSON.stringify(goods)
console.log(js);//{"name":"菠萝","price":15}
console.log($.type(js))//string
var pineapple='{"name":"菠萝","price":15}';
//将字符串变成对象
var obja=$.parseJSON(pineapple)
console.log(obja.name,obja.price);二：jQuery的属性有哪些？
attr（）获取某个属性的值，设置某个标签属性的值
removeAttr（）删除某个标签属性
addClass（）给某个标签添加class属性值
removeClass（）删除某个标签class属性值
toggleClass（）如果有class属性值 ，就删除class属性值 ；如果没有class属性值 ，就添加class属性值----切换样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片样式</title>
<script src="js/jquery-3.5.1.js"></script>
<script>
//显示图片路径
function showSrc() {
//使用$ 读取img标签中的src属性
// attr 标签中的属性
var str = $("img").attr("src") //获取属性
alert(str);
}
//修改图片路径
function updSrc() {
$("img").attr("src", "1.gif") //设置属性
}
//添加aa边框样式
function addCs() {
//$("img").attr("class","aa") //设置属性
$("img").addClass("aa") //添加样式
}
//删除aa边框样式
function delCs() {
//$("img").attr("class","")class属性还会存在
//$("img").removeAttr("class")
$("img").removeClass("aa") //删除样式
}
//切换aa边框样式
function qhCs() {
$("img").toggleClass("aa")
//如果有 就删除
//如果没有 就加
}
</script>
<style>
.aa {
border: 10px solid red;
/*边框*/
}
.bb {
box-shadow: 0px 0px 40px black;
/*阴影*/
}
</style>
</head>
<body>
<img src="2.gif" alt="" class="bb">
<button onclick="showSrc()">显示图片路径</button>
<button onclick="updSrc()">修改图片路径</button>
<button onclick="addCs()">添加aa边框样式</button>
<button onclick="delCs()">删除aa边框样式</button>
<button onclick="qhCs()">切换aa边框样式</button>
</body>
</html>
prop（）设置或返回被选元素的属性和值
prop(参数1，参数2)：
- 参数1用于设置属性
- 参数2设置属性值
注意：attr 针对的是标签中的属性
prop 针对的是js中的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="js/jquery-3.5.1.js"></script>
<script>
function add(){
$("div").prop("textContent","卧榻之侧");
}
</script>
</head>
<body>
<div></div>
<button onclick="add()">点我增加内容</button>
</body>
</html>
html（）获取某个标签的内容-------相等于innerHTML
注意：该标签可以包含子代标签
text（）获取某个标签的内容 -------相等于textContent
注意：该标签不能包含子代标签
val（）获取/设置输入框的数值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<!-- 导入jQuery -->
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//添加方法:text------相等于textContent
// html------相等于innerHTML
function add() {
//方法一
//先获取div的id属性
//var aid=document.getElementById("aa");//dom元素
// var writing=prompt('请输入你想要增加的文字');
// aid.textContent=writing;
//方法二
//先获取div的id属性
var aid = $("#aa");
var writing = prompt('请输入你想要增加的文字');
//aid.text(writing);
aid.html(writing);
}
</script>
</head>
<body>
<div id="aa"></div>
<button type="button" onclick="add()">添加文字</button>
</body>
</html>
案例：表格颜色隔行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格颜色隔行</title>
<script src="js/jquery-3.5.1.js"></script>
<style>
table,tr,td{
border: 1px solid red;
border-collapse: collapse;
}
.odd{
background: red;
color: chartreuse;
text-align: left;
}
.even{
background: yellow;
color: ghostwhite;
text-align: right;
}
</style>
<script>
$(function(){
//增加样式
//奇数
$("tr:gt(0):odd").addClass("odd");
//偶数
$("tr:gt(0):even").addClass("even");
})
</script>
</head>
<body>
<table width="300px">
<tr>
<td>标题</td>
<td>内容</td>
</tr>
<tr>
<td>汉武帝</td>
<td>大汉帝国</td>
</tr>
<tr>
<td>唐太宗</td>
<td>大唐帝国</td>
</tr>
<tr>
<td>明太祖</td>
<td>大明帝国</td>
</tr>
<tr>
<td>秦始皇</td>
<td>大秦帝国</td>
</tr>
<tr>
<td>宋太祖</td>
<td>大宋帝国</td>
</tr>
<tr>
<td>成吉思汗</td>
<td>蒙古帝国</td>
</tr>
<tr>
<td>元太祖</td>
<td>大元帝国</td>
</tr>
<tr>
<td>魏文帝</td>
<td>大魏帝国</td>
</tr>
<tr>
<td>晋武帝</td>
<td>大晋帝国</td>
</tr>
<tr>
<td>金太祖</td>
<td>大金帝国</td>
</tr>
</table>
</body>
</html>
案例：购物车多选/取消多选操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选</title>
<script src="js/jquery-3.5.1.js"></script>
<script>
function myAll(){
//获取所有的input标签
$("input").each(function(i,e){
//i是下标 e是input元素
/**
var f1=$("#all").prop("checked")//得到all是否被选中
$(e).prop("checked",f1)
**/
e.checked=all.checked;
})
}
</script>
</head>
<body>
<input type="checkbox" id="all" onclick="myAll()">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</body>
</html>
三：jQuery的css操作
css():设置标签的css样式
①：获取样式值---------css("样式名")
②：设置单个样式------css("样式名","样式值")
③：设置多个样式-------css({"样式名"："样式值"，"样式名"："样式值"})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//改变操作方法
//改变p1的背景
function change_p1(){
//css("属性名，属性值")
//获取id
var pid=$("#p1");
//改变背景颜色
pid.css("background","blue");
}
//改变p2的背景
function change_p2(){
//方法一
//获取class属性
//var pclass=$(".p2");
//pclass.css("background","red");
//方法二
//dom元素无法调用jquery的方法
//将一个元素从dom -> jquery
//使用$()进行包裹起来
//$(".p2")[0]-----dom元素(集合)
//[0]-----相同class属性名的位置下标
$($(".p2")[1]).css("background","red");
}
//改变p标签的背景
function change_p(){
//获取所有的p标签----$("p")
$("p").css("background","pink");//背景颜色
$("p").css("color","red")//文字颜色
$("p").css("font-size","20px")//字体大小
}
//改变div里面的p标签的背景
function change_div(){
// div p div里面的所有的p标签(子元素和子子...元素)
// div>p div里面的所有的p标签(子元素)
$("div p").css("background","yellow");
}
//改变p2,p3标签的背景
function change_p23(){
//使用多个选择器,用逗号隔开$里面的内容(属性名)
$(".p2,.p3").css("background","gray");
}
</script>
</head>
<body>
<div>
<p id="p1">我是p1</p>
<p class="p2">我是p2</p>
<p class="p2">我是p3</p>
<p>我是p4</p>
</div>
<p class="p3">我是div外面的p</p>
<button onclick="change_p1()">点击我改变p1的背景</button>
<button onclick="change_p2()">点击我改变p2的背景</button>
<button onclick="change_p()">点击我改变p标签的背景</button>
<button onclick="change_div()">点击我改变div里面的p标签的背景</button>
<button onclick="change_p23()">点击我改变p2,p3标签的背景</button>
</body>
</html>④：改变样式操作
function cs() {
/**
//单个样式设置
$("img").css("border","10px solid red")
$("img").css("box-shadow","0px 0px 40px black")
**/
//多个样式设置
$("img").css({
"border": "10px solid red",
"box-shadow": "0px 0px 40px black"
})
}
位置
①：offset() 相对于整个大容器的相对位置
②：position() 相对父容器的相对位置
③：scrollTop() 滚动条到顶部的位置
尺寸
内容尺寸
①：width() 容器宽
②：height() 容器高
内部尺寸
①：innerWidth() width+padding
②：innerHeight() height+padding
外部尺寸
注意：参数为true，再加上margin
①：outerWidth() width+padding+border
②： outerHeight() height+padding+border
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-3.5.1.js">
</script>
<script>
$(document).ready(function(){undefined
$("button").click(function(){undefined
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>尺寸</button>
<p>width() </p>
<p>height() </p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="js/jquery-3.5.1.js">
</script>
<script>
$(document).ready(function(){undefined
$("button").click(function(){undefined
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height() + "</br>";
txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height of div: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>尺寸</button>
<p>innerWidth() </p>
<p>innerHeight() </p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){undefined
$("button").click(function(){undefined
$("#div1").width(320).height(320);
//$("#div1").css({"width":"320px","height":"320px"})
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>尺寸</button>
</body>
</html>
734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
