Jquery对象和JS对象区别与转换
- JQuery对象在操作时更加方便。
- JQuery对象和js对象的方法是不通用的
- 两者相互转换
- JQuery--->js:jquery对象[索引] 或者 jquery对象.get(索引)
- js--->JQuery:$(js对象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="div1">div1.....</div>
<div id="div2">div2.....</div>
<script>
// //1.通过js方式来获取名称叫div的所有html元素对象
// var divs = document.getElementsByTagName("div");
// // alert(divs);//可以将其当作数组来使用
// //对divs中的所有div标签 让其标签体的内容变为 "aaa"
// for (let i = 0; i < divs.length; i++) {
// // divs[i].innerHTML = "aaa";
// $(divs[i]).html("aaa");
// }
// alert(div1.innerHTML)
// alert(div2.innerHTML)
//2.通过JQuery方式来获取名称叫div的所有html元素对象
var $divs = $("div");
/* alert($divs);//也可以当作数组来使用
//对divs中的所有div标签 让其标签体的内容变为 "bbb" 使用JQuery的方式
$divs.html("bbb");
*/
$divs[0].innerHTML = "ddd";
$divs[1].innerHTML = "fff";
</script>
</body>
</html>
选择器:筛选具有相似特征的元素(标签)
- 基本语法学习:
- 事件绑定:
- 入口函数:
- 样式控制:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/jquery-3.6.0.min.js"></script>
</head>
<script>
//事件绑定
//给b1按钮添加单机事件
//获取b1按钮
/*window.onload = function () {
$("#b1").click(function () {
alert("abc1");
});
};*/
//JQuery入口函数(dom文档加载完成后执行入口函数)
// $(function () {
// //获取b1按钮
// $("#b1").click(function () {
// alert("abc1");
// });
// });
/**
* window.onload和$(function () {})区别
* window.onload只可以定义一次,如果定义多次后边的会覆盖掉前面的
* $(function () {})可以定义多次
*/
</script>
<body>
<div id="div1">div1.....</div>
<div id="div2">div2.....</div>
<input type="button" value="点我" id="b1">
<script>
$(function () {
$("#div1").css("backgroundColor","blink");
$("#div2").css("background-color","read");
});
</script>
</body>
</html>
标签:Jquery,JQuery,function,JS,对象,div,alert,divs
From: https://www.cnblogs.com/ailhy/p/16600951.html