jQuery相关

最新推荐文章于 2022-08-08 21:23:32 发布
L_summer1989
最新推荐文章于 2022-08-08 21:23:32 发布
阅读量119
点赞数 1
本文链接：https://blog.csdn.net/L_summer1989/article/details/117934973
版权
<!--   01-获取标签元素 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // js的内置对象，html的文档对象
        //  如果获取的对象是null，表示标签没有获取成功

        // function fnLoad(){
        //     var oP = document.getElementById("p1");
        //     alert(oP);
        // }
        // 页面标签和数据都加载完成以后会触发onload事件
        // window.onload = fnLoad;

        // 这种写法才是开发过程中真正的写法，要等页面标签和数据加载完成
        window.onload = function(){
            var oP = document.getElementById("p1");
            alert(oP);
        };
    </script>
</head>
<body>
    <p id="p1">哈哈，我是一个段落标签</p>
</body>
</html>
<!-- 这种写法，不推荐，知道即可，就是等标签初始化完成再获取 -->
<!-- <script>
    // js的内置对象，html的文档对象
    //  如果获取的对象是null，表示标签没有获取成功
    var oP = document.getElementById("p1");
    alert(oP);
</script> -->

<!--   02-标签属性的获取和设置 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .btnstyle{
            background: yellow;
            font-size: 30px;
        }
    </style>
    <script>
        window.onload = function(){
            //  根据id获取标签对象
            var oBtn = document.getElementById("btn1");
            //  获取标签的属性
            alert(oBtn.type);
            alert(oBtn.value);
            //  设置标签的属性
            oBtn.name = "username";
            //  设置样式的属性
            // oBtn.style.background="red";
            //  相当于设置class ，以后通过类选择器给标签添加样式
            //  注意点: class 这里变成 className
            oBtn.className = "btnstyle"
            //  font-size => fontSize
            // oBtn.style.fontSize = "30px";
        };
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn1" >
</body>
</html>

<!--   03-innerHTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            //  根据标签的id获取标签对象
            var oDiv = document.getElementById("div1")
            //  获取标签内容
            alert(oDiv.innerHTML);
            //  设置标签内容
            oDiv.innerHTML = "<a href='http://www.baidu.com'>百度</a>"
        }
    </script>
</head>
<body>
    <div id="div1">
        哈哈，不要睡觉!
    </div>
</body>
</html>

<!--   04-数组的定义和数组的操作 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //  定义数组
        var aArray1 = new Array(1, 2, 3);
        console.log(aArray1);
        //  字面量方式创建，相当于直接赋值一个数组，数组的表现形式是一对中括号
        var aArray2 = [3, 6, 9];
        console.log(aArray2);
        // alert(aArray2);
        //  多维数组
        var aArray3 = [[1, 2, 3], [3, 6, 9]];
        console.log(aArray3);
        //  根据下标获取数据
        // alert(aArray3[0][1]);
        //  演示数组的相关操作
        var aArray4 = [3, 6, 9];
        //  获取数组的长度(个数)
        alert(aArray4.length);
        //  根据下标取值
        // alert(aArray4[2]);
        //  js里面不支持负数下标
        // alert(aArray4[-1]);
        //  根据下标修改数据
        aArray4[1] = 26
        console.log(aArray4);
        //  追加数据
        aArray4.push('hello');
        console.log(aArray4);
        //  删除做后一个元素, 这里pop不支持根据下标删除
        var oValue = aArray4.pop()
        console.log(oValue);
        console.log(aArray4);
        //  插入数据
        //  1. 开始删除的索引
        //  2. 删除的个数
        //  3. 插入的数据
        aArray4.splice(1, 0, '苹果');
        console.log(aArray4);
        //  从下标2删除2个数据
        aArray4.splice(2, 2)
        console.log(aArray4);
        aArray4.splice(1, 0, '鸭梨', '香蕉');
        console.log(aArray4);
    </script>
</head>
<body>

</body>
</html>

<!--   05-循环语句 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var aArray = [1, 3, 9];
        // // for 循环遍历数组
        // for(var index = 0; index < aArray.length; index++){
        //     //  根据下标获取数据
        //     var oValue = aArray[index];
        //     alert(oValue);
        // }
        // // 开始取值的下标
        // var index = 0
        // while(index < aArray.length) {
        //     //  根据下标获取数据
        //     var oValue = aArray[index];
        //     alert(oValue);
        //     index++;
        // }
        var index = 0;
        do {
            //  这里需要完成取值操作, 不管条件是否成立，do至少执行1次
            // alert('测试');
            var oValue = aArray[index];
            alert(oValue);
            index++;
        } while(index < aArray.length)
    </script>
</head>
<body>

</body>
</html>

<!--   06-字符串拼接 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var sName = '李四';
        var iAge = 20;
        var sSex = '男';
        var sResult = sName + sSex;
        alert(sResult);
        //  字符串和数字进行拼接，底层自动把数字类型转成字符串，这种操作隐式类型转换
        sResult = sName + iAge
        alert(sResult);
        // +=
        // iAge += sSex
        // alert(iAge);
        // 扩展: ---
        var sStr = '20';
        var iResult = iAge + parseInt(sStr);
        alert(iResult)
        var sStr1 = '20.5'
        var iResult1 = iAge + parseFloat(sStr1);
        alert(iResult1)
    </script>
</head>
<body>

</body>
</html>

<!--   07-定时器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 定时器：根据指定的时间间隔延时调用指定的函数 -->
    <script>
        function fnShow(name, age){
            alert("ok" + name + age);
            alert(tid)
            //  销毁定时器
            clearTimeout(tid);
        }
        // //  根据时间间隔调用一次函数的定时器
        // // 1. 定时器要执行的函数
        // // 2. 时间间隔 单位:毫秒  2000=2秒
        // // 3. 参数，多个参数使用逗号进行分割
        // //  返回值表示创建定时器返回的id，通俗理解就是创建的第几个定时器
        var tid = setTimeout(fnShow, 2000, '李四', 20)
        function fnShowInfo(name, age) {
            alert("ok" + name + age)
        }
        function fnStop(){
            // alert(tid);
            //  销毁定时器
            clearInterval(tid);
        }
        // 根据时间间隔重复函数的定时器
        // var tid = setInterval(fnShowInfo, 3000, '李四', 22);
    </script>
</head>
<body>
    <input type="button" value="停止" onclick="fnStop();">
</body>
</html>

<!--   08-jquery的使用 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导入jquery对应的js文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 使用jquery代码需要重新开一个script标签 -->
    <script>
        //  原生js写法
        window.onload = function(){
            //  当前页面的标签和标签使用的资源数据都加载完成，onload事件才会触发
            var oDiv = document.getElementById("div1");
            alert(oDiv);
        };
        //  $符号就是jquery的象征
        // $ 本质是就是函数，只不过这个函数名($)
        // $(document).ready(function(){
        //     //  获取标签和css样式匹配标签的规则一样
        //     //  以后使用jquery，变量名都要以$符号开头
        //     var $div = $("#div1");
        //     alert($div)
        // });
        //  jquery的简写方式
        $(function(){
            var $div = $("#div1");
            alert($div)
        })
        // ready 等待页面标签加载完成以后就执行ready事件， 不会等待资源数据加载完成
    </script>
</head>
<body>
    <div id="div1">哈哈</div>
    <img src="http://img5.imgtn.bdimg.com/it/u=2720625662,4207476265&fm=26&gp=0.jpg" alt="">
</body>
</html>

<!--   09-jquery的选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //  获取标签对象
            var $p = $("p");
            // alert($p.length);
            //  通过jquery设置标签的样式
            $p.css({"color": "red"});
            // var $div = $(".div1");
            // alert($div.length);
            // var $div1 = $("#box1");
            // alert($div1.length);
            // var h1 = $("div h1");
            // alert(h1.length);
            //  属性选择器，先根据标签选择html标签，然后再根据属性值进行过滤标签
            var $input = $("input[type=text]");
            alert($input.length)
            //  结论： jquery选择器获取标签，和css选择器匹配标签的方式一样
        });
    </script>
</head>
<body>
    <p>hello</p>
    <p>hello</p>
    <div class="div1">哈哈</div>

    <div id="box1">嘻嘻</div>

    <div>
        <h1>哈哈</h1>
    </div>

    <input type="text">
    <input type="button">
</body>
</html>

<!--   10-选择集过滤 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //  通过jquery选择器获取html的标签
            var $divs = $("div");
            //  获取包含有指定选择器的父标签
            $divs.has(".pname").css({"background":"red"});
            //  根据下标选择指定的标签
            $divs.eq(1).css({"background":"blue"});

            //  选择集过滤就是在选中的集合标签里面，根据需要过滤出来自己想要的标签
        });
    </script>
</head>
<body>
    <div>
        <p class="pname">哈哈</p>
    </div>
    <div>
        <input type="button" value="按钮">
    </div>
</body>
</html>

<!--   11-选择集转移 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <style>
        .box{
            text-decoration:
            text-indent:

        }
    </style> -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 选择集转移: 根据指定标签为参照物，选中其它标签，这种操作叫做选择集转移 -->
    <script>
        $(function(){
            //  获取div，并把div作为参照物，获取其它标签
            var $div = $("#box1")
            //  css 参数是一个js对象，js对象和python里面字典很类似
            //  属性名和css里面的属性名保存一致
            //  选择上一个同级标签
            $div.prev().css({"color": "red", "font-size": "25px"});
            //  选择上面所有的同级标签
            $div.prevAll().css({"text-indent": "50px"});
            //  选择下一个同级标签
            $div.next().css({"color": "green"});
            //  选择下面所有的同级标签
            $div.nextAll().css({"text-indent": "50px"})
            //  选择同级的其它标签
            $div.siblings().css({"text-decoration":"underline"});
            //  选择父标签
            $div.parent().css({"background": "gray"});
            //  获取所有的子标签
            $div.children().css({"color": "red"});
            //  查找指定的子标签
            $div.find(".sp1").css({"color": "green"})

        })
    </script>
</head>
<body>
    <div>
        <h3>三级标题</h3>
        <p>哈哈哈</p>
        <div id="box1"><span>我是</span>一个<span class="sp1">div</span>标签</div>
        <h3>三级标题</h3>
        <p>哈哈哈</p>
    </div>

</body>
</html>

<!--   12-获取和设置标签内容(jquery) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //  获取标签
            var $div = $("div");
            //  jquery的方式获取标签内容
            alert($div.html());
            //  设置标签内容
            $div.html("<a href='https://www.baidu.com'>百度</a>");
            //  扩展: 追加内容
            $div.append("<a href='https://www.baidu.com'>谷歌</a>")

        });
    </script>
</head>
<body>
    <div>哈哈</div>
</body>
</html>

<!--   13-获取和设置标签属性(jquery) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //  获取标签
            var $p = $("p");
            var $text = $("#txt1");
            //  获取样式属性，比如:获取字体大小
            var $px = $p.css("font-size");
            alert($px);
            //  设置样式属性
            $p.css({"font-size":"30px", "background":"green"});
            //  除了样式属性的相关操作使用css方法，其它属性的操作都是prop方法
            //  获取属性
            var $name = $text.prop("name");
            alert($name);
            var $type = $text.prop("type");
            alert($type);
            //  设置属性
            // $text.prop({"value":"张三", "class":"tname"});
            //  获取value属性可以使用val方法
            // alert($text.prop("value"));
            //  使用val方法获取value属性
            alert($text.val())
            //  使用val方法设置value属性
            $text.val("王五");
        });
    </script>
</head>
<body>
    <p>哈哈，我是一个段落标签</p>
    <input type="text" name="username" id="txt1" value="李四">
</body>
</html>
L_summer1989
关注
1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
jQuery相关

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed.
复制链接

扫一扫