jQuery——基本选择器

最新推荐文章于 2022-12-15 16:10:34 发布

Yeoman92

最新推荐文章于 2022-12-15 16:10:34 发布

阅读量367

点赞数

分类专栏： web前端文章标签： web前端开发 jquery

本文链接：https://blog.csdn.net/Yeoman92/article/details/53930787

版权

web前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

JavaScript的操作对象

JavaScript是Web前端开发的基石,用于完成用户的交互操作,例如:

提交表单
- document.getElementById(“form”).submit();
清空”班级”下拉框中的所有选项
- document.getElementById(“classes”).length = 0;
将第一个图片进行放大
- document.getElementsByTagName(“img”).style.width=”500px”;
将第二个”兴趣”复选框选中
- document.getElementsByName (“fun”)[1].checked=”checked”;

其实所谓的JavaScript操作就是”在哪些元素上做什么事情”

JavaScript开发中遇到的问题

在JavaScript中用于获取组件的方法通常用以下3个:

document.getElementById() //利用组件ID获取对象
document.getElementsByName() //利用name属性获取多个对象
document.getElementsByTagName() //利用元素标签名获取

但这三个方法不是万能的,假如我们遇到以下需求就麻烦了:

name属性中是个包含”container”字符串的组件删除
将当前页面中第三个元素隐藏
将当前页面中存放在<div>里面的超链接文本颜色变成紫色

幸好,在jQuery中为我们提供了”选择器selector”

jQuery中的选择器

jQuery选择器就是为了解决Web前端编程的时候”如何获取组件的问题”
jQuery选择器的基本语法:

jQuery(“选择器表达式”) 或者
$(“选择器表达式”)

jQuery选择器的种类

选择器表达式按功能与用途区分,可分为8类:

基本选择器
属性选择器
位置选择器
层叠选择器
内容过滤器
表单过滤器
子过滤器
可见性选择器

jQuery基本选择器

基本选择器的语法

All Selector (“*”)
- 所有选择器,获取当前页面中所有对象
Class Selector (“.class”)
- 类选择器 , 选择当前页面中拥有执行CSS类的对象
Element Selector (“element”)
- 元素选择器,选择指定标签名的选择器
ID Selector (“#id”)
- ID选择器,指定Id元素的对象
Multiple Selector (“selector1, selector2, selectorN”)
- 组合选择器,对元素进行组合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>基本选择器</title>
        <style>
            .astyle{
                font-size: 28px;
                color: red;
            }
            .bstyle{
                font-size: 40px;
                color:orangered;
                text-decoration: none;
            }
        </style>

        <script src="js/jquery-1.11.3.js"></script>
        <script>
            //文档就绪函数
            $(function(){
                //在页面加载完成后执行里面的语句
                //CSS函数的含义是为jquery选中的对象这是指定的css属性
                //1. *代表所有选择器
                //jQuery("*").css("border" , "1px solid red");
                //2. 类选择器,使用的方法是$(".类名")或者是jQuery(".类名")
                //$(".bstyle").css("border" , "1px solid red");
                //3. 元素选择器,$("标签名")
                //$("div").css("border" , "1px solid red");
                //4. ID选择器,$("#ID") =>document.getElementById("id")等价
                //$("#li7").css("border" , "1px solid red");
                //5. 组合选择器,将多个选择器的结果进行组合,使用方法是$("selector1 , selector2 , ..... , selectorN")
                $("#li3 , #a9 , .astyle").css("border" , "1px solid red");
            })
        </script>
    </head>
    <body>
        <div>
            <li>1.<a href="#">超链接1</a></li>
            <li>2.<a href="#">超链接2</a></li>
            <li id="li3">3.<a href="#">超链接3</a></li>
            <li>4.<a href="#" class="astyle">超链接4</a></li>
            <li>5.<a href="#">超链接5</a></li>
            <li>6.<a href="#">超链接6</a></li>
            <li id="li7">7.<a href="#" class="astyle">超链接7</a></li>
            <li>8.<a href="#" >超链接8</a></li>
            <li>9.<a href="#" id="a9">超链接9</a></li>
            <li>10.<a href="#" class="bstyle">超链接10</a></li>
        </div>
    </body>
</html>