828~829 JQuery对象和JS对象区别与转换、事件绑定&入口函数&样式控制
3、JQuery对象和JS对象区别于转换
1. JQuery对象在操作时，更加方便。
2. JQuery对象和js对象方法不通用的.
3. 两者相互转换
jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
js -- > jq : $(js对象)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test03</title> <script src="../js/jquery-3.3.1.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.length);//可以将其当做数组来使用 //对divs中所有的div 让其标签体内容变为"aaa" for (var i = 0; i < divs.length; i++) { //divs[i].innerHTML = "aaa"; $(divs[i]).html("ccc"); } //2. 通过jq方式来获取名称叫div的所有html元素对象 var $divs = $("div"); alert($divs.length);//也可以当做数组使用 //对divs中所有的div 让其标签体内容变为"bbb" 使用jq方式 //$divs.html("bbb"); // $divs.innerHTML = "bbb"; $divs[0].innerHTML = "ddd"; $divs.get(1).innerHTML = "eee"; /* 1. JQuery对象在操作时，更加方便。 2. JQuery对象和js对象方法不通用的. 3. 两者相互转换 * jq -- > js : jq对象[索引] 或者 jq对象.get(索引) * js -- > jq : $(js对象) */</script></body></html> |
1.基本语法学习：
1.事件绑定
1 2 3 | //1.获取id按钮$("#b1").click(function(){ alert("abc");}); |
2.入口函数
1 2 | $(function () { }); |
window.onload 和 $(function) 区别
window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
$(function)可以定义多次的。
3.样式控制：css方法
1 2 | // $("#div1").css("background-color","red");$("#div1").css("backgroundColor","pink"); |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）