目录
本节内容:
append 追加的方法:
html 替代了js中的innerHTML属性 可设置可获取:
$(js对象) 作用:转换作用:
jQuery----->原生态js:
each(); 遍历数组 对象 对象数组
$工具代码:
jQuery中的加载函数的定义:
jQuery中的鼠标移入移除事件演示:
———————————————
本节内容:
append 追加的方法:
$("#oDiv").append($("<a href='#'>百度</a>"));
html 替代了js中的innerHTML属性 可设置可获取:
$("#oDiv").html("<p>标题一</p>");
$("#oDiv").html($("<a href='#'>百度</a>"));
$(js对象) 作用:转换作用:
将一个原生态的jsdom对象转换成jQuery的dom对象
获取oDiv设置内容
oDiv 获取标签
console.log($(document.getElementById("oDiv")).html())
jQuery----->原生态js:
注意:通过选择器获取的jQuery对象都是以伪数组的形式存储的
可以通过下标转换成js对象
var $oDiv = $("#oDiv");
// 通过下标过去
console.log($oDiv[0].innerHTML)
// 第二种方法 通过get方法 下标获取
console.log($oDiv.get(0).innerHTML)
each(); 遍历数组 对象 对象数组
$----类似java中的类
$()----类似java中的类的构造方法
$工具中的类方法
定义数组 var arr=[] var arr=Array();
定义一个数组存储五个名字
var name = ["张三", "里斯", "王五", "蛮子", "小六子"];
//遍历数组
$.each(name, function(index, names) {
//第一种方法
console.log(index, names);
//第二种下标
console.log(name[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) {
$.each(stu, function(name, value) {
console.log(name, value)
})
})
$工具代码:
2. trim 去掉两端空格 var stu = "asd "; console.log($.trim(stu).length) // 3.type(); 判断值类型 var st = "asd "; console.log($.type(st)) //返回String // 4.isArray(); 判断是否是一个数组 var names = ["张三", "里斯", "王五", "蛮子", "小六子"]; console.log($.isArray(names)) //返回布尔值类型 //5.isFunction() 判断是否是一个函数 console.log($.isFunction(jQuery)); // (6)parseJSON() 将满足json定义的字符串转换成一个对象或者对象数组 var stu = "[\"aa\",\"bb\",\"cc\"]"; var stu = '["aa","bb","cc"]'; console.log($.type(stu)) // 通过parseJSON转换 var stuArr = $.parseJSON(stu) console.log($.type(stuArr));
jQuery中的加载函数的定义:
$(document).ready(function(){ alert("第一种方法。"); }); $(function(){ alert("第二种方法。"); });
jQuery中的鼠标移入移除事件演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .odd { background-color: #FFFF00; } </style> </head> <body> <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> </table> </body> <script type="text/javascript"> // even 奇数 odd 偶数 过滤器 // $("table>tbody>tr:gt(0):even").addClass("odd") //鼠标触碰事件 mouseover $("table>tbody>tr:gt(0)").mouseover(function() { $("table>tbody>tr:gt(0)").removeClass("odd"); $(this).addClass("odd") }) //鼠标离开触碰事件 $("table>tbody>tr:gt(0)").mouseout(function() { $(this).removeClass("odd"); }) </script> </html>
摸鱼真君