JQuery笔记4：JQuery选择器

最新推荐文章于 2021-06-03 07:56:36 发布

zhanzkw

最新推荐文章于 2021-06-03 07:56:36 发布

阅读量674

点赞数

分类专栏： JQuery 文章标签： jquery div input function button class

本文链接：https://blog.csdn.net/studyalllife/article/details/6757440

版权

JQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Dom选择器就是getElementById ，getElementByName函数。

JQuery 选择器和Dom选择器一样，用于查找满足条件的元素。

$(" # 控件Id") 来根据控件 id 获得控件的 jQuery 对象，相当于getElementById

 $(" # div1").html("<font color=red>hello</font>")

$("TagName") 来获取所有指定标签名的 jQuery 对象，相当于getElementsByTagName：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //这时候Dom元素还没有加载解析出来呢，所以$("p")取不到任何元素，和Dom中为什么把初始化事件加载到οnlοad=initEvent()一样的。
        //$("p").click(function () { alert("点击了P标签"); });
        
        $(function () {//这个函数相当于onload
            $("p").click(function () { alert("点击了P标签"); });//给所有选出的p标签添加click事件
        });

    </script>
</head>
<body>
    <p>嘻嘻</p>
    <p>哈哈</p>
    <p>嘿嘿</p>
</body>
</html>

CSS 选择器，同时选择拥有样式的多个元素

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <style type="text/css">
    .warning{background-color:Yellow;color:Red;}
    </style>
    <script type="text/javascript">
        $(function () {
            $(".warning").click(function () { alert("点击了警告信息"); });
        });
    </script>
</head>
<body>
    <p class="warning">嘻嘻</p>
    <div class="warning">嘿嘿</div>
    <input id="Button2" type="button" value="嘿嘿" class="warning"/>
</body>
</html>

多条件选择器： $("p,div,span.menuitem") ，同时选择 p 标签、 div标签和拥有 menuitem 样式的 span 标签元素

注意：选择器表达式中的空格不能多不能少。这是易错点！

层次选择器：
• （ 1 ） $("div li") 获取 div 下的所有 li 元素（后代，子、子的子 …… ）
• （ 2 ） $("div > li") 获取 div 下的直接 li 子元素，注意“>”l两边都有空格。

• （ 3 ） $(".menuitem + div") 获取样式名为 menuitem 之后的第一个 div元素（不常用）

• （ 4 ） $(".menuitem ~ div") 获取样式名为 menuitem 之后所有的 div 元素（不常用）

表单选择器

• （ 1 ） $(":input") 把所有的可能提交到服务器的表单都算做input，选取所有的 <input> 、 <textarea> 、 <select> 和 <button> 元素。和 $("input") 不一样， $("input") 只获得 <input>

• （2 ） $(":text") 选取所有单行文本框，等价于 $("input[type=text]")

• （3 ） $(":password") 选取所有密码框。同理还有 :radio 、 :checkbox 、:submit 、 :image 、 :reset 、 :button 、 :file 、 :hidden 。

zhanzkw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery笔记4：JQuery选择器

Dom选择器就是getElementById ，getElementByName函数。JQuery 选择器和Dom选择器一样，用于查找满足条件的元素。 $(" # 控件Id") 来根据控件 id 获得控件的 jQuery 对象，相当于getElementById
复制链接

扫一扫