jQuery4(3种选择器,选择器获取元素)

最新推荐文章于 2024-07-16 21:46:04 发布

天赋进行时

最新推荐文章于 2024-07-16 21:46:04 发布

阅读量979

点赞数

分类专栏： JS-Dom-Jquery

本文链接：https://blog.csdn.net/xbc1213/article/details/50639285

版权

JS-Dom-Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

该内容所将选择器都是出现在style中;

id选择器

实例:

 #dv   //id选择器
     {
      width:300px;
      height:200px;
      background-color:Gray;   
     }

知识点::将id为dv的标签设置为该样式

标签选择器

实例:

div
    {
      width:300px;
      height:200px;
      background-color:Gray;   
    }

知识点:将div标签的所有样式设置为该样式

类选择器

实例:

.cls
    {
      width:300px;
      height:200px;
      background-color:Gray;   
    }

知识点:将类(class)为cls的标签设置为该样式

注意:三者有优先级.id最高,类选择器其次.标签最低

全部代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">       
    </script>
    <style type="text/css">
    /* #dv   id选择器
     {
      width:300px;
      height:200px;
      background-color:Gray;   
     }
     */
     /* 标签选择器
    div
    {
         width:300px;
      height:200px;
      background-color:Gray;   
    }
    */
    /* 类选择器    
    .cls
    {
         width:300px;
      height:200px;
      background-color:Gray;   
    }
    */
   /* 三者优先级: id最高,类其次,标签选择器最低*/     
    </style>
</head>
<body>
    <div class='cls'>
    </div>
</body>
</html>

选择器获取元素

知识点:

$('#btn')   //获取id为btn的元素
$('.cls')   //护球类名为cls的元素
$('input')  //获取标签input的元素

注意:因为jQuery的隐式迭代(主要是因为执行完方法后会返回当前的对象),所以,无需在进行遍历循环.即使你获取到的元素是一个集合.

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        //点击按钮,改变层的样式,并且在层中,来个font标签,显示样式
        //#id .类 直接写标签
        //页面加载
        $(function () {
            $('#btn').click(function () {
                $('.dv').css('width', '300px').css('height', '200px').css('backgroundColor', 'green').html('<font color="red" size="7" face="全新硬笔行书简">我会用挖掘机</font>');
            });
        });  
    </script>
</head>
<body>
    <input type="button" name="name" value="哈哈" id='btn' />
    <div class='dv'>
    </div>
</body>
</html>