Java学习（JQuery基础（jquery对象和js对象的区别，选择器,DOM操作(内容操作,属性操作，CRUD操作),案例(隔行换色,全选全不选,qq表情选择,下拉列表左右移动)））

本文链接：https://blog.csdn.net/XXX_17/article/details/123688612

2022/3/23

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

//封装方法，根据id来获取元素对象
function $(id){
    var obj = document.getElementById(id);
    return obj;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js框架</title>
    <script src="js/webtest.js"></script>
</head>
<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
<script>
    //根据id获取元素对象
    var div1 = $("div1");
    var div2 = $("div2");
    //2.获取标签体内容
    alert(div1.innerHTML);
    alert(div2.innerHTML);

</script>
</body>
</html>

2.快速入门：
1.步骤：
1.下载JQuery
2.导入JQuery的js文件：导入min.js文件
3.使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>

<script>
    <!--使用JQuery获取元素对象-->
    var div1 = $("#div1");
    alter(div1.html());
    var div2 = $("#div2");
    alter(div2.html());
</script>
</body>
</html>

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>JQuery对象和js对象的转换</title>
    <script src="js/jquery.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(div.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 让其标签体内容变为“ddd”  使用jq方式
    //$divs.html("bbb");
    $div[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.事件绑定
2.入口函数
3.样式控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery.min.js"></script>
    <script>
        //给b1按钮添加单击事件
        window.onload = function(){
        //1.获取b1按钮
        $("#b1").click(function(){
            alert("abc");
        });
        }

        //jquery入口函数（dom文档加载完成之后执行该函数中的代码）
        $(fun