一：$是什么？？？
是一个函数，来源于jQuery库中
window.jQuery = window.$ = jQuery;（$ jQuery是等价的）
把jQuery和$作为了window的一个属性
jQuery库------自执行函数（定义后自己调用了）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $这个符号到底是什么？
// ------》其实就是一个函数，来源于jQuery库中
// window.jQuery = window.$ = jQuery;
// 把jQuery和$作为了window的一个属性
// jQuery库------自执行函数（定义后自己调用了）
// $ jQuery是等价的
(function() {
alert(123)
}())
// 参数传递不同，效果也不一样。
// $(function(){}) 入口函数
// $("") 选择器/创建一个标签
// $(dom对象) js--》jQUery
// $(function(){})
// jQuery(function(){})
// 判断类型[object Function]
console.log(Object.prototype.toString.call($))
console.log(window.jQuery === window.$) //true
console.log(jQuery === $) //true
// $是jQuery中为window对象定义的属性 jQuery
// window.jQuery = window.$ = jQuery;
// Object.prototype.toString.call($) 可以知道$也是一个函数
// jQuery文件中有一个基本骨架 自执行函数
// $(function(){})
// $与jQuery在使用时可以互换
</script>
</head>
<body>
</body>
</html>
二：$工具方法
1. $.each(): 遍历数组或对象中的数据
2. $.trim(): 去除字符串两边的空格
3. $.type(obj): 得到数据的类型
4. $.isArray(obj): 判断是否是数组
5. $.isFunction(obj): 判断是否是函数
6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工具方法的使用</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
/*加载事件*/
$(function() {
// id $("#id")
// class $(".class")
// $("div")
//$("li:first") 取第一个
//$("li:last") 取最后一个
//$("li:eq(3)") 取第四个
//$("li:gt(3)") 取第四个和以上的
//$("li:lt(4)") 取第四个和以下的
//$("li:odd") 奇数
//$("li:even") 偶数
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
//求和
var sum = 0
//遍历 $.each()
$.each(arr, function(i, e) {
console.log("下标:" + i, "值" + e)
sum += e;
})
console.log(sum)
//定义对象
var obj = {
name: "小乖",
sex: "🚺",
size: "210"
}
//使用$遍历对象
$.each(obj, function(i, e) {
console.log("属性名：" + i, "属性值:" + e)
})
//取出空格
var str = " 123 "
str = $.trim(str)
console.log(str)
//type 查看类型
console.log($.type(arr)) //Array
console.log($.type(obj)) //Object
console.log($.type(sum)) //Number
console.log($.type(str)) //String
console.log($.type($("input"))) //集合
//isArray 查看是否时数组
console.log($.isArray($("input"))) //集合
console.log($.isArray(arr)) //数组
//js Array.from()
console.log($("input").toArray()) //将集合变成数组
function fn() {
alert('--')
} //定义一个函数
var ts = fn
console.log($.isFunction(ts)) //是否时一个函数
//JSON 将对象变成字符串（将字符串变成对象）
var goods = {
name: "可乐",
price: 25
}
var os = JSON.stringify(goods) //将对象变成字符串
console.log(os)
var bs = '{"name":"可乐","price":25}'
var obja = $.parseJSON(bs) //将字符串变成对象
console.log(obja.name, obja.price)
//数组
var a1 = JSON.stringify(arr)
console.log(a1)
var b1 = '[1,2,3,4,5,6,7,8,9,10,11,12]'
var b2 = $.parseJSON(b1)
console.log(b2)
})
function dj() {
//遍历对象数组
var count = 0;
var str = "";
$("input").each(function(i, e) {
console.log(i, e)
if (e.checked == true) {
count++
str += e.value
}
})
alert(count + "---" + str)
//$.each($("input"),function(){})
}
</script>
</head>
<body>
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
<input type="checkbox" value="4">
<input type="checkbox" value="5">
<button οnclick="dj()">点我获取</button>
</body>
</html>
JQuery属性和CSS方法
三：属性
1.attr()：获取某个标签属性的值，或设置某个标签属性的值
2.removeAttr()：删除某个标签属性
3.addClass()：给某个标签添加class属性值
4.removeClass():删除某个标签class属性值
5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情 况，比如多选
6.html():获取某一个标签体内容（注意：该标签体中可以包含子标 签）
7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
8.val()：主要用户获取/设置输入框的值
<!-- jQuery库 -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- jQuery中的属性和样式设置和获取 -->
<hr>
<h2>1.attr()：获取某个标签属性的值，或设置某个标签属性的值
注意事项：可以设置表单元素的属性，但是不能获取</h2>
<div id="odiv" style="width: 100px;height: 100px;background-color: #00FFFF;">
</div>
<input type="text" id="inputs" value="" />
<button type="button" id="obtn1">点击获取</button>
<button type="button" id="obtn2">点击设置</button>
<button type="button" id="obtn3">点击设置input</button>
<script type="text/javascript">
$("#obtn1").click(function() {
alert($("#odiv")).attr("id");
})
$("#obtn2").click(function() {
$("#odiv").attr("name", "demo")
})
$("#obtn3").click(function() {
// $("#inputs").attr("name","demo2")
alert($("#inputs").attr("value"))
})
</script>
<h2>2.removeAttr()：删除某个标签属性
注：移除整个属性</h2>
<div name="sb" id="ok">
</div>
<button type="button" id="obtn4">移除name属性</button>
<script type="text/javascript">
$("#obtn4").click(function() {
$("#ok").removeAttr("name");
})
</script>
<h2>3.addClass()：给某个标签添加class属性值
注：如果标签上有class 继续使用addClass后会叠加样式
<br>
4.removeClass():删除某个标签class属性值
</h2>
<div id="odiv2">
</div>
<button type="button" id="obtn5">添加样式</button>
<button type="button" id="obtn6">移除样式</button>
<script type="text/javascript">
$("#obtn5").click(function() {
$("#odiv2").addClass("obox2");
})
$("#obtn6").click(function() {
$("#odiv2").removeClass("sb");
})
</script>
<h2>
5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选(专门用来获取和设置表单元素)
</h2>
<input type="text" name="sb" id="one" />
<button type="button" class="mybtn">点击设置</button>
<script type="text/javascript">
// 获取name属性或者value属性
$(".mybtn").click(function() {
$("#one").prop("name", "lisi")
$("#one").prop("value", "lisi")
})
</script>
<h2>
6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）
7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
8.val()：主要用户获取/设置输入框的值
</h2>
<div id="demo1">
好好学习
<div>
天天开心
</div>
</div>
<input value="123" type="text" id="demo2" />
<script type="text/javascript">
console.log($('#demo1').html());
console.log($('#demo1').text());
// val()获取非表单元素 结果为空
console.log($('#demo1').val());
// 表单元素
console.log($('#demo2').val());
// 表单元素通过html() 结果为空
console.log($('#demo2').html());
// 表单元素通过text() 结果为空
console.log($('#demo2').text());
</script>
案例三：使用jQuery属性演示《表格颜色隔行》
<h2>案例：表格隔行换颜色</h2>
<table border="1" width="100%" height="300px">
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
</table>
<script type="text/javascript">
$("table tr:even").addClass("sb");
$("table tr:odd").addClass("sb2");
</script>
案例四：实现
————————————————
版权声明：本文为CSDN博主「T276tangjingyi」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_65479202/article/details/123419202案例四：实现多选/取消多选操作
<hr>
<h2>全选</h2>
<button type="button" id="all">全选</button>
<button type="button" id="qxall">取消全选</button>
<input type="checkbox" value="1" />1
<input type="checkbox" value="2" />2
<input type="checkbox" value="3" />3
<input type="checkbox" value="4" />4
<input type="checkbox" value="5" />5
<script type="text/javascript">
$("#all").click(function() {
// 获取所有的复选框
$("input:checkbox").each(function() {
// console.log($(this).val())
$(this).prop("checked", true)
})
})
$("#qxall").click(function() {
// 获取所有的复选框
$("input:checkbox").each(function() {
// console.log($(this).val())
$(this).prop("checked", false)
})
})
</script>
<pre>
</pre>
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.sb {
/* border: 10px solid blueviolet; */
background-color: hotpink;
}
.obox2 {
width: 100px;
height: 100px;
background-color: plum;
}
.sb2 {
background-color: aquamarine;
}
</style>
<!-- jQuery库 -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- jQuery中的属性和样式设置和获取 -->
<hr>
<h2>1.attr()：获取某个标签属性的值，或设置某个标签属性的值
注意事项：可以设置表单元素的属性，但是不能获取</h2>
<div id="odiv" style="width: 100px;height: 100px;background-color: #00FFFF;">
</div>
<input type="text" id="inputs" value="" />
<button type="button" id="obtn1">点击获取</button>
<button type="button" id="obtn2">点击设置</button>
<button type="button" id="obtn3">点击设置input</button>
<script type="text/javascript">
$("#obtn1").click(function() {
alert($("#odiv")).attr("id");
})
$("#obtn2").click(function() {
$("#odiv").attr("name", "demo")
})
$("#obtn3").click(function() {
// $("#inputs").attr("name","demo2")
alert($("#inputs").attr("value"))
})
</script>
<h2>2.removeAttr()：删除某个标签属性
注：移除整个属性</h2>
<div name="sb" id="ok">
</div>
<button type="button" id="obtn4">移除name属性</button>
<script type="text/javascript">
$("#obtn4").click(function() {
$("#ok").removeAttr("name");
})
</script>
<h2>3.addClass()：给某个标签添加class属性值
注：如果标签上有class 继续使用addClass后会叠加样式
<br>
4.removeClass():删除某个标签class属性值
</h2>
<div id="odiv2">
</div>
<button type="button" id="obtn5">添加样式</button>
<button type="button" id="obtn6">移除样式</button>
<script type="text/javascript">
$("#obtn5").click(function() {
$("#odiv2").addClass("obox2");
})
$("#obtn6").click(function() {
$("#odiv2").removeClass("sb");
})
</script>
<h2>
5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选(专门用来获取和设置表单元素)
</h2>
<input type="text" name="sb" id="one" />
<button type="button" class="mybtn">点击设置</button>
<script type="text/javascript">
// 获取name属性或者value属性
$(".mybtn").click(function() {
$("#one").prop("name", "lisi")
$("#one").prop("value", "lisi")
})
</script>
<h2>
6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）
7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
8.val()：主要用户获取/设置输入框的值
</h2>
<div id="demo1">
好好学习
<div>
天天开心
</div>
</div>
<input value="123" type="text" id="demo2" />
<script type="text/javascript">
console.log($('#demo1').html());
console.log($('#demo1').text());
// val()获取非表单元素 结果为空
console.log($('#demo1').val());
// 表单元素
console.log($('#demo2').val());
// 表单元素通过html() 结果为空
console.log($('#demo2').html());
// 表单元素通过text() 结果为空
console.log($('#demo2').text());
</script>
<hr>
<h2>案例：表格隔行换颜色</h2>
<table border="1" width="100%" height="300px">
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
</table>
<script type="text/javascript">
$("table tr:even").addClass("sb");
$("table tr:odd").addClass("sb2");
</script>
<hr>
<h2>全选</h2>
<button type="button" id="all">全选</button>
<button type="button" id="qxall">取消全选</button>
<input type="checkbox" value="1" />1
<input type="checkbox" value="2" />2
<input type="checkbox" value="3" />3
<input type="checkbox" value="4" />4
<input type="checkbox" value="5" />5
<script type="text/javascript">
$("#all").click(function() {
// 获取所有的复选框
$("input:checkbox").each(function() {
// console.log($(this).val())
$(this).prop("checked", true)
})
})
$("#qxall").click(function() {
// 获取所有的复选框
$("input:checkbox").each(function() {
// console.log($(this).val())
$(this).prop("checked", false)
})
})
</script>
<pre>
</pre>
</body>
</html>
四：CSS
1.css()：设置标签的css样式
获取样式值：css("样式名")
设置单个样式：css("样式名","样式值")
设置多个样式：css({"样式名"："样式值"，"样式名"："样式值"})
2.位置
offset()：相对整个大容器的相对位置
position()：相对父容器的相对位置
scrollTop()：滚动条到顶部距离
3.尺寸
内容尺寸
width():容器宽
height():容器高
内部尺寸
innerWidth()：width+padding
innerHeight()：height+padding
外部尺寸
outerWidth():width+padding+border
outerHeight():height+padding+border
注意：参数为true，再加上margin
width():容器宽
height():容器高
innerWidth()：width+padding
innerHeight()：height+padding
outerWidth():width+padding+border
outerHeight():height+padding+border
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#odiv {
width: 100px;
height: 100px;
background-color: mediumpurple;
position: absolute;
left: 200px;
top: 100px;
border: 10px solid khaki;
}
.box {
position: relative;
width: 50px;
height: 50px;
background-color: palegreen;
left: 20px;
top: 20px;
}
</style>
<!-- jQuery库 -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
for (var i = 1; i < 2000; i++) {
document.write("<br />")
}
</script>
<div id="odiv">
<div class="obox">
</div>
</div>
<script type="text/javascript">
var $odiv = $("#odiv");
console.log($odiv.offset().left);
console.log($odiv.offset().top);
var $obox = $("#obox");
console.log($obox.position().left);
console.log($obox.position().top);
window.onsroll = function() {
console.log("滚动中...");
}
$(window).scroll(function() {
console.log($(this).scrollTop())
})
console.log($odiv.width());
// width+padding
console.log($odiv.innerWidth());
// width+padding+border
console.log($odiv.outWidth());
</script>
</body>
</html>
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
