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

来源：互联网发布：社交网络未来趋势编辑：程序博客网时间：2024/06/10 07:27

该内容所将选择器都是出现在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