<!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. 使用Charles进行网络请求抓包解析

    使用Charles进行网络请求抓包解析 0. 懒人的福音(⌐■_■)(破解版下载地址,记得安装java库支持) http://pan.baidu.com/s/1c08ksMW 1. 查看电脑的ip地址 ...

  2. 深入理解python中的yield关键字

    想必大家都看过这样的代码: 上面的这段代码会计算0-9的平方并打印出来. 那么问题来了,这段代码和我们要说的东西有什么区别呢? 这里的关键字,yield,我在前面的文章里已经发过了.那么yield是什 ...

  3. ZT 二叉树先序，中序，后序遍历非递归实现

    二叉树先序,中序,后序遍历非递归实现 分类: 数据结构及算法2012-04-28 14:30 8572人阅读 评论(6) 收藏 举报 structc 利用栈实现二叉树的先序,中序,后序遍历的非递归操作 ...

  4. 《面向对象程序设计》 三 Calculator 计算器初步

    Git传送门 纸上得来终觉浅,绝知此事要躬行. 学习了一些c++的相应知识后,虽然了解写法,真正操作时还是出现小错误.要多操作,记住关键点,避免不该有的小错误. 写分文件类外定义时出现了问题.在Sca ...

  5. php 访问控制和重载

    一     php 类中定义的private/protected属性,类外部是无法访问的,但是 我们可以通过public方法来访问设置这些属性 如下 <?php class test{ priv ...

  6. 如何检查oracle的归档空间是否满了

    如何检查oracle的归档空间是否满了   关于如何检查归档空间是否慢了,大多数人会去先检查放归档的目录的磁盘空间是否满了,通过该归档目录空余情况来判断归档空间是否满了,但我觉得这个方法不一定代表实际 ...

  7. ubuntu 12.04 64位 安装wps

    1.去wps官网下载linux版的软件 http://community.wps.cn/download/ 我这里下载的是Alpha版的kingsoft-office_9.1.0.4280~a12p4 ...

  8. 切换composer国内镜像

    composer config -g repo.packagist composer https://packagist.phpcomposer.com

  9. MySql+Memcached架构的问题

    Memcached采用客户端-服务器的架构,客户端和服务器端的通讯使用自定义的协议标准,只要满足协议格式要求,客户端Library可以用任何语言实现. Memcached服务器使用基于Slab的内存管 ...

  10. HBase学习之路 （九）HBase phoenix的使用

    HBase phoenix的下载 下载地址http://mirror.bit.edu.cn/apache/phoenix/ 选择对应的hbase版本进行下载,测试使用的是hbase-1.2.6版本