jQuery中如何给html中的input添加下拉框

转载

mob64ca1409d8ea 2024-10-30 13:08:13

获取设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jQuery-1.8.3.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                //等于innerHTML 无参是获取，有参是设置
                console.log($("p").html());
                //等于 innerText 用法同上
                console.log($("p").text());
                $("p").text("<h1>aswagwfwa</h1>");
                $("p").html("<h1aswagwfwa</h1>");
                //等于DOM.value无参是获取的，有参是设置
                console.log($("#inp").val());
                $("#inp").val('fwafaw')
            
            })
        });
    </script>
</head>
<body>
    <button id="btn">点击</button>
    <input type="text" id='inp'>
    <p>我是段落 <span>子标签</span></p>
</body>
</html>

全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jQuery-1.8.3.js"></script>
    <script>
        $(function(){
            $("#all").click(function(){
                // console.log(this.checked);

                console.log($(this).attr('checked'));
                // attr可以操作自定义属性 , 等于getAttribute
                // 一个参数是获取该属性的值
                // 两个参数是设置该属性的值
                // 表单选中这些属性较特殊,需要使用prop解决,
                // $(this).attr('checked','checked')
                // prop 只能操作标签支持的属性,
                // 用法同上attr
                console.log($(this).prop('id'));
                // 判断全选是否选中
                if($(this).prop("checked")){
                    // 所有复选框全部选中
                    $("input").prop("checked",true);
                }else{
                    $("input").prop("checked",false);
                }
            });
        });
    </script>
</head>
<body>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"   id='all'> 全选
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #dv{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 10px solid red;
            margin: 10px;
        }
    </style>
    <script src="../js/jQuery-1.8.3.js"></script>
    <script>
        $(function(){
            $("#btn").click(function (){
                console.log($("#dv").width()); //300px
                console.log($("#dv").innerWidth());   // // innerWidth = width + padding
                // 320 因为是innerWidth,所以有左右内边距
                console.log($("#dv").outerWidth(true));  outerWidth = width + padding+border
                // 如果传递true 还会加上margin  360

            })
        })
    </script>
</head>
<body>
    <button id="btn">获取</button>
    <div id="dv"></div>
</body>
</html>

滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            position: fixed;
            right: 10px;
            bottom:  100px;
            background-color: red;
            color: #999;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            text-decoration: none;
            display: none;
        }
    </style>
    <script src="../js/jQuery-1.8.3.js"></script>
    <script>
        $(function(){
            // 滚动条事件
            window.onscroll = function(){
                // 获取滚动的高度
                console.log($(this).scrollTop());
                // 获取窗口高度
                console.log($(this).height());
                // 滑动三分之二的时候 就显示回到顶端
                if($(this).scrollTop() >= $(this).height()/3*2){
                    $("a").show(1000);
                }else{
                    $("a").hide(1000);
                }
            }
        });
    </script>
</head>
<body>
    <p id="one">1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <a href="#one">回到顶端</a>
</body>
</html>

js-Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            btn.onclick=function(){
                    /**
         * 1 获取ajax引擎对象
         * 
         * 2 配置URL,以及发送方式
         * 
         * 3 监听
         * 
         * 4 发送
         */

              // 1 获取ajax引擎对象
              var xmlhttp;
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                // 2 配置请求方式,url,是否异步(true是异步)
                xmlhttp.open("GET", "test1.txt", true);

                // 3 监听
                xmlhttp.onreadystatechange = function () {
                    // readyState 4 是请求完成 
                    // status 200 是成功 , 404 找不到 , 500 服务器内部错误
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        // 成功后 要做的事
                        // responseXML : 返回是XML对象
                        // responseText : 普通字符串
                        console.log(xmlhttp.responseText);
                        document.getElementById('content').innerHTML = xmlhttp.responseText
                    }
                }
                // http://localhost:52330/_07_JS-Ajax.html
                // file:///D:/19%E6%9C%9F/%E8%AF%BE%E4%BB%B6/day_43_jQueryHTML%E6%8F%92%E4%BB%B6%E3%80%81Ajax%E3%80%81JSON/%E4%BB%A3%E7%A0%81/_07_JS-Ajax.html
                // 4 发送请求
                xmlhttp.send();
            }
        }
        xx("get",'test.html',true,function(){
            document.getElementById('content').innerHTML = xmlhttp.responseText
        });
// 1 获取ajax引擎对象
var xmlhttp;
        function xx(method,url,a,fn){
               // 1 获取ajax引擎对象
            //    var xmlhttp;
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                // 2 配置请求方式,url,是否异步(true是异步)
                xmlhttp.open(method,url,a);

                // 3 监听
                xmlhttp.onreadystatechange = function () {
                    // readyState 4 是请求完成 
                    // status 200 是成功 , 404 找不到 , 500 服务器内部错误
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                      fn();
                     }
                }
                xmlhttp.send();
        }
    </script>
</head>
<body>
    <button id="btn">获取数据</button>
    <div id="content"></div>
</body>
</html>

get post

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jQuery-1.8.3.js"></script>
    <script>
         $(function(){
            $("#btn").click(function(){
                // 第一个参数 是 url 
                // 第二个参数是 成功的回调函数,没有失败的回调函数
                $.get('test1.txt?xxx=xxx',function(data){
                    console.log(data);
                    $("#content").html(data);
                });
            });
        });
    </script>
</head>
<body>
    <button id="btn">获取数据</button>
    <div id="content"></div>
</body>
</html>

ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jQuery-1.8.3.js"></script>
    <script>
           $(function(){
            $("#btn").click(function(){
                $.ajax({
                    // 到哪去
                    url:'test1.txt',
                    // 请求方式
                    type:'get',
                    // 是否异步,默认是true
                    async:true,
                    // 传参
                    // data:{xxx:2,xxxx:23},
                    // 成功回调
                    success:function(data){
                        $("#content").html(data);
                    },
                    // 失败回调
                    error:function(data){
                        console.log("加载失败:"+data.status);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="btn">获取数据</button>
    <div id="content"></div>
</body>
</html>

json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script >
         // JSON 和对象的字面量创建方式是一样的,不过一般属性我们就放到 '' 引号中了
        // 另外 JSON和 对象的操作也是一致的 因为JSON就是JS对象
        // JavaScript Object Notation
        var json = {
            'name':'张三',
            'age':18
        };
        var str = "{'name':'张三','age':18}";
        console.log(json.name);
        console.log(json['age']);

        // JSON对象 转换为 JSON格式的字符串
        var jsonStr = JSON.stringify(json);
        console.log(jsonStr);
        // JSON格式的字符串 转换为 JSON对象
        var jsonObj = JSON.parse(jsonStr);
        console.log(jsonObj);

        // JSON数组转换
        var jsons = [
            {'name':'张三1','age':"15"},
            {'name':'张三2','age':"16"},
            {'name':'张三3','age':"14"}
        ];
        // 转字符串
        var jsonStr = JSON.stringify(jsons);
        console.log(jsonStr);
        // JSON格式的字符串 转换为 JSON对象
        var jsonObj = JSON.parse(jsonStr);
        console.log(jsonObj);
    </script>
</head>
<body>
    
</body>
</html>

html 等于是innerHTML无参会简析
text不会被简析

.val()也是接收

prop 只能操作标签支持的属性
attr可以操作自定义属性，一个是获取值，两个是设置

表单选中的属性，需要prop解决

innerwidth只加内边距加padding
outerwidth 加padding，如果为true 还需加上margin

empty清空内容，但保留该标签
remove删除该标签

get 明文传输
post 隐藏传输

传参需要,‘’

Text-decoration清楚下划线
window.onscroll 窗口滚动
scroll 滚动

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。