<!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. [SQL SERVER] 映射网络驱动器，让SQL服务器可见

    在服务器上运行: EXEC sp_configure 'show advanced options', 1; GO RECONFIGURE; GO EXEC sp_configure 'xp_cmds ...

  2. [WSUS] [Windows 10 Upgrade 1607/1703] 升级出错，出现 0xC1800118 或者卡在下载中…… 0%后失败

    1. 安装 KB3159706 ,并进行安装后维护操作:https://support.microsoft.com/en-us/help/3159706/update-enables-esd-decr ...

  3. MySQL: OPTIMIZE TABLE: Table does not support optimize, doing recreate + analyze instead

    show create table history;-------------------------- CREATE TABLE `foo` (  `itemid` bigint(20) unsig ...

  4. Xcode 5.1 编译模拟器以及真机都能使用的静态库

    Xcode 5.1.dmg 下载地址 http://pan.baidu.com/s/1jGJpKm6 1.新建 Framework & Library 工程 我起名叫ShowInfo,下面为其 ...

  5. Beautifulsoup模块安装之pip命令

    1.在python引用 BeautifulSoup >>>from bs4 import BeautifulSoup 发现没有该模块 2.Linux输入 # pip install ...

  6. Logstash和Flume-NG Syslog接收小测试

    目前在大规模日志处理平台中常见的日志采集器可以采用Logstash或Flume.这两种日志采集器架构设计理念基本相似,都采用采集-过滤处理-输出的方式.下面对这两种采集器Syslog接收性能做个简单测 ...

  7. jdk1.5-jdk1.9的主要区别

    jdk1.5相对以前jdk版本主要新增功能 1.自动拆箱和装箱 其中基本数据类型的包装类有:Double,Float,Long,Integer,Short,Character和Boolean 2.提供 ...

  8. BZOJ1444:[JSOI2009]有趣的游戏(AC自动机,矩阵乘法)

    Description Input 注意 是0<=P, n , l, m≤ 10. Output Sample Input input 1 3 2 2 1 2 1 2 AB BA AA inpu ...

  9. c语言学习——安装

    作为颜控,选择了vs2019 工作组件选择c++,vs扩展开发. 默认安装就行了 安装成功,附图

  10. Day1 Java编程环境和变量

    什么是软件? 软件的基本组成部分是完成其功能的程序. 在日程生活中,可以将程序看成对一系列动作的执行过程的描述. 什么是计算机程序? 为了让计算机执行某些操作或解决某个问题二编写的一系列有序指令的集合 ...