1.$工具方法
1.$.each()：遍历数组、对象、对象数组中的数据
2.$.trim()：去除字符串两边的空格
3.$.type(obj)：得到数据的类型
4.$.isArray(obj)：判断是否是数组
5.$.isFunction(obj)：判断是否是函数
6.$.parseJSON(obj)：解析json字符串转换为js对象/数组
2.jQuery属性和CSS
1.属性
1.attr()：获取某个标签属性的值，或设置某个标签属性的值
2.removeAttr()：删除某个标签属性
3.addClass()：给某个标签添加class属性值
4.removeClass():删除某个标签class属性值
5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选
6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）
7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
8.val()：主要用户获取/设置输入框的值
2.CSS
1.css()：设置标签的css样式
获取样式值：css("样式名")
设置单个样式：css("样式名","样式值")
设置多个样式：css({"样式名"："样式值"，"样式名"："样式值"})
案例5：使用css属性设置标签的样式
2.位置
offset()：相对整个大容器的相对位置
position()：相对父容器的相对位置
scrollXX
scrollTop()：滚动条到顶部距离
3.尺寸
内容尺寸
内部尺寸
外部尺寸
注意：参数为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>
<!-- 导入jQuery库 -->
<style>
.demo1 {
border: 1px solid red;
}
.demo2 {
background-color: yellow;
}
.even{
background-color: #FF0000;
}
.odd{
background-color: #FFFF00;
}
</style>
<script language="JavaScript" type="text/javascript" src="js/jquery-3.6.0.js" charset="UTF-8"></script>
<script>
function add() {
}
// $("标签") 创建标签 （/\）
// console.log($("<a href = '#'>百度以下</a>"))
$(function() {
// append 内部追加 替代了js中的appendChild方法
// $("#oDiv").append($("<a href = '#'>百度以下</a>"));
// html 替代了js中的innerHTML属性 可设置可获取
// $("#oDiv").html($("<a href = '#'>百度以下</a>"))
// $(js对象) 作用：转换作用
// 将一个原生态的jsdom对象转换成jQuery的dom对象
// 获取oDiv设置内容
// console.log(document.getElementById('oDiv').html());
// console.log($(document.getElementById('oDiv')).html());
// jQuery----->原生态js
// 注意：通过选择器获取的jQuery对象都是以伪数组的形式存储的
// 1.可以通过下标转换成js对象
// var $oDiv = $("#oDiv");
// console.log($oDiv[0].innerHTML)
// console.log($oDiv.innerHTML);
// 2.可以通过get方法+下标获取
// console.log($oDiv.get(0).innerHTML);
// $----类似java中的类
// $()----类似java中的类的构造方法
// 1.$工具中的类方法（静态方法）
// （1）each() 遍历数组 对象 对象数组
// a.数组的定义
// aa. var arr = []
// bb. var arr = new Array();
// 定义一个数组存储5个姓名
// var names = ["张三","里斯","王五","蛮子","小六子"];
// $.each(names,function(index,name){
// // console.log(index,name);//获取每一个元素
// // console.log(name);
// console.log(names[index]);
// });
// 对象{}
// var student = {
// "name":"张三",
// "sex":"男",
// "age":18
// }
// $.each(student,function(name,value){
// console.log(name,value);
// });
// var students = [
// {
// "name":"张三",
// "sex":"男",
// "age":18
// },
// {
// "name":"张三2",
// "sex":"女",
// "age":19
// }
// ]
// $.each(students,function(index,stu){
// // console.log(index,stu);
// $.each(stu,function(name,value){
// console.log(name,value);
// });
// });
// （2）trim() 去掉字符串两端的空格
// var str = " a sd ";
// console.log(str.length)
// console.log($.trim(str).length)
// 遍历 非空格拼接 charAt()
// （3）type() 判断值类型
// console.log($.type("东方不败"));
// console.log($.type(jQuery));
// （4）isArray() 判断是否是一个数组
// console.log($.isArray(names));
// （5）isFunction() 判断是否是一个函数
// console.log($.isFunction(add))
// （6）parseJSON() 将满足json定义的字符串转换成一个对象或者对象数组
//AJAX--无刷新技术
// var stu = "[\"aa\",\"bb\",\"cc\"]";
// var stu = '["aa","bb","cc"]';
// console.log($.type(stu))
// // 通过parseJSON转换
// var stuArr = $.parseJSON(stu)
// console.log($.type(stuArr));
// var stus = '[{"name":"zkingzz"},{"name":"zkingcc"}]';
// console.log($.type(stus))
// console.log($.type($.parseJSON(stus)));
});
</script>
</head>
<body>
<div id="oDiv" style="border: 1px solid red;height: 20px;">
helloworld
</div>
<hr>
<h3>jQuery中属性和CSS操作</h3>
<ul id="oUl1">
<li id="one">1.attr:设置或者获取标签的属性</li>
<li class="demo1">2.removeAttr:移除属性（属性和值都会移除）</li>
<li>3.addClass:添加样式 会叠加</li>
<li>4.removeClass移除指定的样式</li>
<li>5.html():获取或者设置标签的内容 包含子标签</li>
<li>6.text(): <span id="sid">获取或者设置标签的内容 不包含子标签</span></li>
<li>7.val() 获取或者设置表单元素中的value值</li>
<li>8.prop() 与attr类似，但是prop专门针对表格中的有boolean类型的标签</li>
<input id="inputs" type="text" value="helloworld" />
<input type="checkbox" value="123" checked="checked" />
</ul>
<script type="text/javascript">
// 原生态js中： getAttribute() setAttribute() removeAttribute()
// 1.attr
// 获取第一个li的id属性值
// console.log($("#oUl1>li:first").attr("id"));
// 另类操作
// console.log($("#oUl1>li").first().attr("id"));
// console.log($("#oUl1").children().first().attr("id"));
// 设置属性
// $("#oUl1>li:first").attr("id","sb");
// 移除属性
// $("#oUl1>li:first").removeAttr("id");
// addClass
// $("#oUl1>li:eq(1)").addClass("demo2");
// $("#oUl1>li").eq(1).addClass("demo2");
// removeClass 移除demo1的样式
// $("#oUl1>li:eq(1)").removeClass("demo1")
// $("#oUl1>li:eq(1)").removeAttr("class")
// console.log($("#sid").parent().html());
// console.log($("#sid").parent().text());
// console.log($("#sid").parent().val());
// console.log($("#inputs").html())
// console.log($("#inputs").text())
// console.log($("#inputs").val())
// prop
// console.log($("#oUl1>li:first").prop("id"));
// console.log($("input:last").prop("checked"));
</script>
<h4>案例:表格隔行换颜色</h4>
<table border="1" width="100%" height="400">
<tr style="background-color: aqua;">
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script>
// 表格隔行换颜色
// $("table>tbody>tr:gt(0):even").addClass("even")
// $("table>tbody>tr:gt(0):odd").addClass("odd")
$("table>tbody>tr:gt(0)").mouseover(function(){
$("table>tbody>tr:gt(0)").removeClass("odd");
$(this).addClass("odd");
});
$("table>tbody>tr:gt(0)").mouseout(function(){
$("table>tbody>tr:gt(0)").removeClass("odd");
});
</script>
<h3>案例：全选案例</h3>
<button>全选</button>
<button>取消全选</button>
<input type = "checkbox" value = "aaa">aaa
<input type = "checkbox" value = "bbb">bbb
<input type = "checkbox" value = "ccc">ccc
<input type = "checkbox" value = "ddd">ddd
<input type = "checkbox" value = "eee">eee
<script>
$("button:first").click(function(){
//获取所有的复选框
$("input:checkbox:gt(0)").each(function(){
// console.log($(this).val());
$(this).prop("checked",true);
});
});
$("button:last").click(function(){
//获取所有的复选框
$("input:checkbox:gt(0)").each(function(){
// console.log($(this).val());
$(this).prop("checked",false);
});
});
</script>
<script>
// 获取表格中第一行tr的背景颜色
// 复合属性：有多个值（背景，是否平铺等等）
console.log($("table>tbody>tr:first").css("backgroundColor"))
</script>
<!-- 位置 -->
<div id="demo3" style="border: 1px solid red; width: 100px; height: 100px;position: absolute;left: 100px;top:100px;background-color: blue;">
<div style="width: 30px;height: 30px;background-color: red;position: relative;left: 20px;top: 30px;"></div>
</div>
<script>
// offset() 获取指定标签相对整个大容器（body）的一个相对距离（top left）
console.log($("#demo3").offset().left);
console.log($("#demo3").offset().top);
// position() 获取指定标签相对于父标签的位置
console.log($("#demo3>div").position().top);
console.log($("#demo3>div").position().left);
// scroll 获取滚动条被滚去的距离
$(document).scroll(function(){
console.log($(this).scrollTop());
});
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
