828~829 JQuery对象和JS对象区别与转换、事件绑定&入口函数&样式控制

3、JQuery对象和JS对象区别于转换

　　1. JQuery对象在操作时，更加方便。

　　2. JQuery对象和js对象方法不通用的.

　　3. 两者相互转换

　　　　jq -- > js : jq对象[索引] 或者 jq对象.get(索引)

　　　　js -- > jq : $(js对象)

<!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>
4.选择器：筛选具有相似特征的元素（标签）

　　1.基本语法学习：

　　　　1.事件绑定

//1.获取id按钮
$("#b1").click(function(){
	alert("abc");
});

　　　　2.入口函数

 $(function () {       
});

　　　　　　window.onload  和 $(function) 区别

　　　　　　window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉

　　　　　　$(function)可以定义多次的。

　　　　3.样式控制：css方法 

 // $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");
posted @ 2023-02-21 10:29  ja不会va  阅读(31)  评论(0)    收藏  举报