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. RabbitMQ入门教程(十):队列声明queueDeclare(转载)

    原文转载至:https://blog.csdn.net/vbirdbest/article/details/78670550 简介本节主要讨论队列声明的各个参数 queueDeclare(String ...

  2. linux环境下运行程序格式错误的问题,bash: ./helloworld: cannot execute binary file: Exec format error

    在编译完quecOpen的example helloworld之后,我运行此程序,结果报错,详情如下: ricks@ubuntu:~/share/project/ql-ol-sdk/ql-ol-ext ...

  3. echart line 初始化隐藏legend

    echart line,当line很多,且各line的取值区间相关非常大时,多条line同时显示,其实是没有太大的可读性的,因此需要在初始化时,把部分不太重要的legend隐藏起来. 具体做法如下: ...

  4. CentOS7.3编译hadoop2.7.3源码

    在使用hive或者是kylin时,可以选择文件的压缩格式,但是这个需要有hadoop native库的支持,默认情况下,hadoop官方发布的二进制包中是不包含native库的,所以无法使用一些压缩相 ...

  5. Hive调优

    Hive存储格式选择 和Hive 相关优化: 压缩参考 Hive支持的存储数的格式主要有:TEXTFILE .SEQUENCEFILE.ORC.PARQUET. 文件存储格式 列式存储和行式存储 行存 ...

  6. jquery鼠标放上去显示悬浮层即弹出定位的div层

    <div><a id="a1" onmouseover="javascript:show('a1','div1');" onmouseout= ...

  7. BZOJ3812主旋律

    /* 这道题其实没有看懂 所以整理一下吧 首先思想转化成所有方案减去不强联通的方案 不强联通的方案相当于很多强联通分量缩点后的dag 转化成子问题, 问很多点的dag方案数 然后枚举作为出度为0的点集 ...

  8. es6(13)--Promise

    //Promise { //原始方法 let ajax=function(callback){ console.log('执行') setTimeout(function(){ callback&am ...

  9. day10学习笔记整理

    函数对象函数是第一类对象: 指的是函数名指向的值(函数)可以被当作数据去使用 1. 可以被引用 2. 可以当作参数传给另外一个函数 3. 可以当作一个函数的返回值 4. 可以当作容器类型的元素   l ...

  10. mac上使用jmeter录制web项目和手机app

    前言: 最近熟悉jmeter进行带宽测试和并发测试,发现网上大多都是windows版本,自己用的mac,实验后发现大同小异 1.下载,我使用的jmeter3.2的版本,可以在网上下载,不区分mac版和 ...