jquery的基本语法

最新推荐文章于 2024-04-29 17:01:02 发布

Devin的小话筒

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量1.7k

点赞数

分类专栏： JavaWeb 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45193791/article/details/124094943

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. js和jQuery的区别

js对象：js语法获取的页面标签对象称为js对象。js对象可以转换成jquery对象。

var a = document.getElementById("d1")

js对象转换成jquery对象的方法

    function a() {
        var a = document.getElementById("d1")
        //将js对象转换成jquery对象
        alert($(a))
    }

jquery对象：jquery语法获取的页面标签称为jquery对象。jquery对象是数组类型，jquery通过索引取出后自动转化为js对象。

    function b() {
        var b = $("div")
        //通过索引，将jquery对象转换成js对象
        alert(b[0])

    }

2.基本选择器

id选择器：$(“#id”)
class选择器：$(“.class名称”)
标签选择器：$(“标签名”)
组合选择器：$(“#id,.class,标签名”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jquery库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        function fun1() {
            //id选择器
            $("#one").css("background-color","red")
        }
        function fun2() {
            //class选择器
            $(".two").css("background-color","green")
        }
        function fun3() {
            //标签选择器
            $("div").css("background-color","orange")
        }
        function fun4() {
            //组合选择器
            $("#one,.two,span").css("background-color","pink")
        }
    </script>
</head>
<body>
<div id="one">我是id=one的div</div>
<br>
<div class="two">我是class=two的div</div>
<br>
<div>我是没有id，class的div</div>
<br>
<span>我是一行数据</span>
<br>
<input type="button" value="id选择器" onclick="fun1()"/>
<input type="button" value="class选择器" onclick="fun2()"/>
<input type="button" value="标签选择器" onclick="fun3()"/>
<input type="button" value="组合选择器" onclick="fun4()"/>
</body>
</html>

3.表单选择器

$(“:text”)选取所有的单行文本框
$(“:password”)选取所有的密码框
$(“:radio”)选取所有的单选框
$(“:checkbox”)选取所有的多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jquery库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        function fun1() {
            //获取第一个dom对象的值
            alert($(":text").val())
        }
        function fun2() {
            var obj=$(":radio");
            for (var i=0;i<obj.length;i++){
                //jquery对象转换成dom对象
                var obj1 = obj[i]
                alert(obj1.value)
                //jquery对象的用法
                // alert($(obj[i]).val())
            }
        }
        function fun3() {
            var obj = $(":checkbox")
            for (var i=0;i<obj.length;i++){
                var obj1 = obj[i]
                alert(obj1.value)
            }
        }
    </script>
</head>
<body>
文本框：<input type="text" value="我是type=text">
<br>
性别：<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="women">女
<br>
爱好：<input type="checkbox" value="bike">骑行
<input type="checkbox" value="football">足球
<input type="checkbox" value="music">音乐
<br>
<input type="button" value="读取text值" onclick="fun1()"/>
<input type="button" value="读取radio的值" onclick="fun2()"/>
<input type="button" value="读取checkbox的值" onclick="fun3()"/>
</body>
</html>

4.表单对象属性过滤器

选择可用的文本框
$(“:text:enabled”)
选择不可用的文本框
$(“:text:disabled”)
复选框选中的元素
$(“:checkbox:checked”)
选择指定下拉列表的被选中元素
$(“选择器>option:selected”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jquery库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btn1").click(function () {
                $(":text:enabled").val("hello")
            })
            $("#btn2").click(function () {
                var obj = $(":checkbox:checked");
                obj.each(function (i, n) {
                    console.log(n.value)
                    alert("第" + i + "个成员，dom值是：" + n.value + "  jquery对象取值：" + $(n).val())
                })
            })
            $("#btn3").click(function () {
                var obj = $("select>option:selected")
                alert(obj.val() + " " + obj.text())
            })
        })

    </script>
</head>
<body>
<label>文本框</label><br>
<input type="text" id="text1" value="text1"/><br>
<input type="text" id="text2" value="text2" disabled/><br>
<input type="text" id="text3" value="text3"/><br>
<input type="text" id="text4" value="text4" disabled/><br>

<label>复选框</label><br>
<input type="checkbox" value="音乐"/>音乐<br>
<input type="checkbox" value="健身" checked/>健身<br>
<input type="checkbox" value="跑步" checked/>跑步<br>
<label>下拉框</label>
<select id="lang">
    <option value="java">java语言</option>
    <option value="go" selected>go语言</option>
    <option value="sql">sql语言</option>
</select>
<br>
<button id="btn1">所有可用的text设值hello</button>
<button id="btn2">显示被选中的复选框的值</button>
<button id="btn3">显示下拉列表选中的值</button>
</body>
</html>

5.jquery常用函数

1.val()
$(选择器).val() ：无参数调用形式，读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值

2.text()
$(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值

3.attr()
$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值

4.html()
$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。

5.each()
语法：$.each( 要遍历的对象, function(index,element) { 处理程序 } )

Devin的小话筒

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
jquery的基本语法

js对象：js语法获取的页面标签对象称为js对象。js对象可以转换成jquery对象。var a = document.getElementById("d1")js对象转换成jquery对象的方法 function a() { var a = document.getElementById("d1") //将js对象转换成jquery对象 alert($(a)) }jquery对象：jquery语法获取的页面标签称为jquery对象
复制链接

扫一扫