css 选择器主要有：元素选择器，ID选择器，类选择器，群组选择器，后代选择器，普通配符选择器等，通过css选择，我们可以很方便的给元素添加样式，使网页看起来更加好看

jquery 选择器也有相似的功能，基本上完全继承了css 样式的风格。

差异：

CSS选择器：查找元素，添加样式；

jquery选择器：查找元素，添加行为；

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <title>Document</title>

 </head>

 <body>

     <div class="demo">区别css选择器和jquery选择器</div>

     <input type="button" value="点击" class="btn">

 </body>

 </html>

方法一：添加css样式

 <style>

         .demo {

             color: red;

             font-size: 30px;

         }

 </style>

方法二：添加jquery事件，改变css样式

 <script>

         $(function() {

             $(".btn").on("click", function() {

                 $(".demo").css({

                     'color': 'red',

                     "font-size": "30px"

                 });

             });

         });

 </script>

运行结果： 两者结果相同

css 直接添加样式的结果                                                                                                         点击事件添加 行为（改变css样式）的结果

                 

但是，某些css 选择器样式部分浏览器有差异，而jquery 选择器设置样式，具有很好的浏览器兼容性，都调整好兼容了，直接使用

还是遵循javascript 中的步骤：1.获取元素  ，2.绑定事件，3.执行方法（函数）

下面整理了一下jquery 获取元素选择器的方法，主要有：基本选择器，过来选择器，层次选择器，表单选择器。如下：

例如，html 代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <title>Document</title>

 </head>

 <body>

     <div class="container">

         <h3>例子</h3>

         <p title="你最喜欢吃的水果">你最喜欢吃的水果？</p>

         <ul class="shuiguo">

             <li class="attive">梨子</li>

             <p class="ss1">骨伤科 </p>

             <a href="javascript:;" class="jjj">学校</a>

             <p class="ss2">火星 </p>

             <p class="ss3"> 毛小方 </p>

             <p class="ss4"> 狄仁杰 </p>

             <ul class="cc">

                 <li class="china">中国</li>

                 <li class="usa">美国</li>

                 <li class="grema">德国</li>

             </ul>

             <li class="apple">苹果</li>

             <li class="caomei">草莓</li>

             <li class="xiangjiao">香蕉</li>

             <p class="ss5"> 塔尼亚 </p>

         </ul>

     </div>

 </body>

 </html>

添加jquery 行为：jquery基本过滤选择器之------ first 选择器

 <script>

         $(function() {

             $("ul:first").css('background', '#acc');

         });

 </script>

运行结果：

添加jquery 行为：jquery层级选择器之------ 相邻选择器

  <script>

         $(function() {

             console.log( $("a.jjj + p") );

         });

 </script>

运行结果：

添加jquery 行为：jquery过滤选择器之------ 内容过滤选择器

  <script>

         $(function() {

             console.log($("li:contains('果')"));

         });

 </script>

运行结果：

添加jquery 行为：jquery过滤选择器之------ 属性过滤选择器

<script>

        $(function() {

            $("[class=attive]").css('background', '#acc');

        });

</script>

jquery接触初级----jquery 选择器的更多相关文章

  1. jquery接触初级----jquery 对象和Dom对象

    1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...

  2. jquery接触初级-----juqery选择器实例

    jquery 选择器用于触发事件,可以少写很多js代码,一般来说,基本的特效功能都能够完成 这里列举一个简单的jquery写的例子: 要求:有两种情况: 1.产品最初状态显示简约形式的品牌,即显示部分 ...

  3. jquery接触初级----- 一种新奇的选择器用法

    今天看到一个新奇的jquery 选择器的用法,因为以前没有见过,所以记录下来 1.jquery 选择器: 给body添加一个元素,添加元素的时候,同时把属性和点击事件都一起进行添加 <!DOCT ...

  4. jquery接触初级-----ajax 之：load()方法

    jquery _ajax 请求主要有几种方式:load(),$.get(),$.post(),$.ajax(),$.getScript(),$.getJson() 1.load()方法 格式:load ...

  5. jquery接触初级-----ajax 之：jquery_ajax 方法

    1. $.get() 方法: 格式:$.get( url,[,data],[,callback],[,type] ); data:  采用键值对的方式存储于对象中; callback: 载入成功时(当 ...

  6. jquery接触初级-----juqery 动画函数

    1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...

  7. jquery接触初级-----juqery DOM操作实例，动态图片显示

    1. 要求:对一个a标签元素,当鼠标操作,移入时,显示a标签title属性的信息,鼠标移出时,隐藏a标签属性的title属性信息 a 标签本身的title 属性具有自我显示的特性,但是这个特性比较慢, ...

  8. jquery接触初级-----juqery DOM操作 之一

    1. DOM 分为三个部分:DOM core ,HTML_DOM,CSS_DOM: 1.1.document.getElementById(),document.getElementsByTagNam ...

  9. jquery接触初级-----juqery DOM操作 之二

    DOm 操作之: 1.1  children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...

随机推荐

  1. 百度地图 android SDKv2.2.0

    首先创建自己的KEY http://lbsyun.baidu.com/apiconsole/key 然后点击设置 参照官网文档点击下面连接 官网文档  http://developer.baidu.c ...

  2. 基于线程池的多并发Socket程序的实现

    Socket“服务器-客户端”模型的多线程并发实现效果的大体思路是:首先,在Server端建立“链接循环”,每一个链接都开启一个“线程”,使得每一个Client端都能通过已经建立好的线程来同时与Ser ...

  3. [UE4]客户端-服务器模式

    客户端负责表现.服务器端负责数据. 以掉血为例: 一.玩家A砍了B一刀 二.服务器计算伤害,修改B的血量 三.把B的血量发给B,A砍B的动作发给所有能看到的玩家 四.客户端播放掉血量(如果允许可见), ...

  4. 安装时提示 INSTALL_PARSE_FAILED_MANIFEST_MALFORMED 解决办法

    INSTALL_PARSE_FAILED_MANIFEST_MALFORMED 安装时出现这个提示. 是由于你工程的AndroidManifest.xml 配置有误,一般来说是activity或Ser ...

  5. github .net core

    https://github.com/dotnet/core/blob/master/Documentation/core-repos.md

  6. JIT和AOT编译详解

    JIT和AOT编译介绍 JIT - Just-In-Time             实时编译,即时编译 通常所说的JIT的优势是Profile-Based Optimization,也就是边跑边优化 ...

  7. Linux之间用SSH传输文件 一行命令实现

    把本机的文件传到目标: cd /home/ && tar czv test | ssh root@HostIP -p 22 'tar xz' 解释: 如你所见,这行命令其实由多个命令组 ...

  8. Navicat Premium 将sqlserver 数据库 导入mysql 中

    1.新建 MySQL 数据库  2.  3 4 5 6 7 8 9一直点击下一步 10 成功

  9. 12 文件查找--find命令

    之前,我们学习过grep来过滤文件内容,而这种查找找的是某一个文件内的内容:以及 less 或者 man 或者上一节提到的 vim 编辑器中的 / 与 ? 都是用来查找单个文件内的内容.而这一节,我们 ...

  10. [java] 求2个集合的交 差 并集

    要求2个集合的交 差 并集. set集合,如下 import java.util.HashSet; import java.util.Set; public class SetTest { publi ...