<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>基本选择器</title>

        <script src="js/jquery.js"></script>

            <style>

             .astyle{

                 font-size: 28px;

                 color: red;

             }

             .bstyle{

                 font-size: 40px;

                 color: orangered;

                 text-decoration: none;

             }

        </style>

        <script type="text/javascript">

            $(function(){

                //页面加载完成执行里面的函数

                //所有元素选择器

                //$("*").css("border","1px solid red");

                //类选择器

                //$(".astyle").css("border","1px solid red");

                //元素选择器

                //$("div").css("border","1px solid red");

                //id选择器

                $("#li3").css("border","1px solid red");

                //组合选择器 方法 $("selector1","selector2",.......)

                $("#li4","#a7",".astyle").css("border", "1px solid red");

            });

        </script>

    </head>

    <body>

        <div>

            <li><a herf="#">超链接1</a></li>

                <li><a herf="#">超链接2</a></li>

                    <li id="li3"><a herf="#">超链接3</a></li>

                        <li id ="li4"><a herf="#" class="astyle">超链接4</a></li>

                            <li><a herf="#">超链接5</a></li>

                                <li><a herf="#">超链接6</a></li>

                                    <li><a id="a7" herf="#" class="bstyle">超链接7</a></li>

        </div>

    </body>

</html>

jQuery学习-基本选择器的更多相关文章

  1. jquery 学习(一) - 选择器

    基本选择器(html) <div>123</div> <div id="n1">123</div> <span>321& ...

  2. jQuery学习- 子选择器与可见性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jQuery学习- 内容选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jQuery学习- 层叠选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jQuery学习- 位置选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. jQuery学习-属性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. jQuery学习之------选择器

    a.id选择器 <div id=”test1”></div> var div1=$(“#test1”);                //同css的写法一样id选择器用#号实 ...

  8. jquery学习：选择器&dom操作

    分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值" ...

  9. jQuery学习(三)——选择器总结

    1.基本选择器 id选择器:$(“#id名称”); 元素选择器:$(“元素名称”); 类选择器:$(“.类名”); 通配符:* 多个选择器共用(并集) 案例代码: <!DOCTYPE html& ...

随机推荐

  1. Prometheus Node_exporter 之 Basic Net / Disk Info

    1. Network Traffic Basic 每个接口的基本网络信息 type: GraphUnit: bytesrecv {{device}} 各个网络接口的下载量 recv lo: 本地环回接 ...

  2. Vue2学习笔记:class和style

    1.用法 <!DOCTYPE html> <html> <head> <title></title> <meta charset=&q ...

  3. 转：Eclipse+webservice开发实例

    原文地址:http://blog.csdn.net/xw13106209/article/details/7049614 1.参考文献: 1.利用Java编写简单的WebService实例  http ...

  4. [翻译] GMCPagingScrollView

    GMCPagingScrollView https://github.com/GalacticMegacorp/GMCPagingScrollView GMCPagingScrollView is a ...

  5. 如何打包ipa文件

    如何打包ipa文件 1. 新建一个工程 // // RootViewController.m // YouXianMing // // Copyright (c) 2014年 Y.X. All rig ...

  6. USMT

    备份当前用户状态:scanstate /i:miguser.xml /i:migapp.xml /i:migdocs.xml /config:config.xml c:\migstorefolder ...

  7. Linux rpm命令详解

    rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采用.RPM ...

  8. 微信小程序 取随机数

    第一思路 如:现在要从50<  . =<100内取一个随机数: ran.Next(1,50)生成的是1-50的随机数+50 结束 第二思路 Math.random()的取值范围是: 0&l ...

  9. python 统计学的各种检验

    1.使用python中的Numpy进行t检验 http://www.atyun.com/7476.html 2.scipy中的卡方检验 http://wiki.mbalib.com/wiki/%E5% ...

  10. October 2nd 2017 Week 40th Monday

    Grown-ups work for things. Grown-ups pay. Grown-ups suffer consequences. 真正的成年人会奋斗.会付出.会承担后果. How to ...