1.$工具方法
1.$.each():遍历数组、对象、对象数组中的数据
2.$.trim():去除字符串两边的空格
3.$.type(obj):得到数据的类型
4.$.isArray(obj):判断是否是数组
5.$.isFunction(obj):判断是否是函数
6.$.parseJSON(obj):解析json字符串转换为js对象/数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><!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>
<title></title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function aaa(){
}
$(function() {
//标签里面追加一个标签替代js中的appendChild方法
// console.log($("<a href='#'>百度一下</a>"))
// $('#id1').append($("<a href=''>百度一下</a>"))
//html替代了js中的innerHTML属性 可设置可获取
// $('#id1').html($("<a href=''>百度一下</a>"))
// $(js对象) 作用:相互转换
// var nn=document.getElementById("id1");
// console.log($(nn).html());
// jQuery----->js
// 注意:通过选择器获取的jQuery对象都是通过伪数组形式存储的
// 1.可以通过下标转换成js对象
// var $adiv=$('#id1');
// console.log($adiv[0].innerHTML)
//2.keyitonguoget方法+下标进行转化
// console.log($adiv.get(0).innerHTML)
//1.$工具中的类方法(静态方法)
// (1)each() 便利数组 对象 对象数组
//a.数组的定义
// 1. var arr=[];
// 2. var arr=new Array();
//定义一个数组保存5个名字
// var names=["云韵","小美","友利奈绪","琉璃","千幡田爱琉"];
// $.each(names,function(index,obj){
// console.log(names[index])
// })
//对象{}
// var student={
// "name":"xpw",
// "sex":"男",
// "age":"19"
// };
// $.each(student,function(index,obj){
// console.log(index,obj)
// })
//对象数组
// var bb = [
// {
// "name": "xpw",
// "sex": "男",
// "age": "19"
// }, {
// "name": "xpw3",
// "sex": "男3",
// "age": "18"
// }
// ];
// $.each(bb,function(index,student){
// console.log(index,student)
// $.each(student,function(name,names){
// console.log(name,names)
// })
// })
// (2)trim() 去掉字符串两端的空格
// var str=" add ";
// console.log(str.length)
// console.log($.trim(str).length)
// (3)type() 判断值类型
// console.log($.type("sjsdjdjjd"))
// (4)isArray() 判断是否是一个数组
// console.log($.isArray(names))
// (5)isFunction() 判断是否是一个函数
// console.log($.isFunction(aaa))
// (6)parseJSON() 将满足json定义的字符串转换成一个字符数组或对象数组
// var cc='["11","22"]';
// console.log($.type(cc))
// var Arry=$.parseJSON(cc);
// console.log($.type(Arry))
})
</script>
</head>
<body>
<div id="id1" style="border: 1px solid red; width: 100%; height: 100px;">
你好世界!
</div>
</body>
</html>