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

该内容所将选择器都是出现在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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值