JQuery（一）_$(arr[i]).html(-CSDN博客

本文链接：https://blog.csdn.net/weixin_46184650/article/details/105323395

JQuery

概念

概念：一个JavaScript框架。简化JS开发

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

//根据id获取元素
function get(id){
    var obj = document.getElementById(id);
    return obj;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/common.js"></script>
</head>
<body>

<div id="div1">div1</div>
<div id="div2">div2</div>

</body>
<script>
    // var div1 = document.getElementById("div1");
    // var div2 = document.getElementById("div2");

    var div1 = get("div1");
    var div2 = get("div2");

    alert(div1);
    alert(div2);
</script>
</html>

快速入门

步骤：

下载JQuery
* jquery-xxx.js 与 jquery-xxx.min.js区别：
1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快
导入JQuery的js文件：导入min.js文件
使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">this is div1</div>
<div id="div2">this is div2</div>
</body>
<script>
    //获取页面上的元素
    var div1 = $("#div1");
    alert(div1.html());

</script>
</html>

##JQuery对象和JS对象区别与转换

JQuery对象在操作时，更加方便。
JQuery对象和js对象方法不通用的.
两者相互转换

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">this is div1</div>
<div id="div2">this is div2</div>
</body>
<script>
    //获取页面上的元素
    // var div1 = $("#div1");
    // alert(div1.html());

    //js和jq对象的相互转换
    var divArr = document.getElementsByTagName("div");
    //alert(divArr);//可以当成数组来使用
    for (var i = 0; i < divArr.length; i++) {
        // divArr[i].innerHTML="aaa";
        //js对象转换为jq对象
        //$(divArr[i]).html("aaa");
    }

    var divArr2 = $("div");
    //alert(divArr2);//也可以当成数组来使用
    //divArr2.html("ccc");
	//divArr2.innerHTML="bbb";js和jq对象的方法属性不通用
    for (var i = 0; i < divArr2.length; i++) {
        //jq转换为js对象
        divArr2.get(i).innerHTML="ddd";
    }

    var $div1 = $("#div1");
    $div1[0].innerHTML="eee";





</script>
</html>

选择器：筛选具有相似特征的元素(标签)

基本操作学习

事件绑定
//1.获取b1按钮
$("#b1").click(function(){
alert(“abc”);
});
入口函数
$(function () {

});
window.onload 和 $(function) 区别

window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
$(function)可以定义多次的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        window.onload=function () {
            $("#btn1").click(function () {
                alert("132");
            });
        }
        //定义多次，后面的会覆盖前面的
        window.onload=function () {
            $("#btn1").click(function () {
                alert("abc");
            });
        }

        
        
       $(function () {//dom文档加载完成之后，执行其中的代码
           $("#btn1").click(function () {
               alert("456");
           });
       });

        //可以定义多次
        $(function () {
            $("#btn1").click(function () {
                alert("456");
            });
        });
    </script>
</head>
<body>
    <button id="btn1">按钮</button>
</body>


</html>

DOM操作

1. 内容操作

html(): 获取/设置元素的标签体内容
内容 --> 内容
text(): 获取/设置元素的标签体纯文本内容
内容 --> 内容
val()：获取/设置元素的value属性值

2. 属性操作

1. 通用属性操作

attr(): 获取/设置元素的属性attribute
removeAttr():删除属性
prop():获取/设置元素的属性propertity
removeProp():删除属性

attr和prop区别？

如果操作的是元素的固有属性，则建议使用prop
如果操作的是元素自定义的属性，则建议使用attr

从jQuery1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。
jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。