1.$工具方法
2.jQuery属性和CSS
1.属性
2.CSS
<!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>