一、选择器类型

  1. id选择器
  2. class选择器
  3. 元素选择器
  4. 层级选择器
  5. 全选择器(*选择器)

二、有几种方式可以隐藏一个元素:

  1. CSS display的值是none。
  2. type="hidden"的表单元素。
  3. 宽度和高度都显式设置为0。
  4. 一个祖先元素是隐藏的,该元素是不会在页面上显示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0

三、属性筛选选择器

四、子元素选择器

四、表单元素选择器

五、特殊选择器this

 注意要点:

this:表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
$(this):代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。

案例:

通过把$()方法传入当前的元素对象的引用this,把这个this加工成jQuery对象,我们就可以用jQuery提供的快捷方法直接处理样式了

$('p').click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css('color','red')
})

jQuery基础 (一)——样式篇(jQuery选择器)的更多相关文章

  1. jQuery基础(样式篇,DOM对象,选择器,属性样式)

      1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真 ...

  2. 【总结整理】JQuery基础学习---样式篇

    进入官方网站获取最新的版本 http://jquery.com/download/    中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScr ...

  3. JQuery基础修炼-样式篇

    jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能.我们可 ...

  4. jQuery基础 (一)——样式篇(认识jQuery)

    一.认识 //等待dom元素加载完毕. $(document).ready(function(){ alert("Hello World!"); }); 二.jQuery对象与DO ...

  5. jQuery基础 (一)——样式篇(属性与样式)

    一.操作特性的DOM方法主要有3个 getAttribute方法 setAttribute方法 removeAttribute方法 注意:而在jQuery中用一个attr()与removeAttr() ...

  6. jQuery基础 (一)—样式篇

    jQuery的优势 jQuery有很多特性和工具方法

  7. jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

  8. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  9. jQuery基础(DOM篇,append(),after(),prepend(),insertAfter(),节点删除,遍历方法each())

    1.DOM创建节点及节点属性   创建流程比较简单,大体如下:   - 创建节点(常见的:元素.属性和文本) - 添加节点的一些属性 - 加入到文档中   流程中涉及的一点方法:   - 创建元素:d ...

随机推荐

  1. Java的Vector源码阅读

    * The {@code Vector} class implements a growable array of * objects. Like an array, it contains comp ...

  2. HTML使用button的一个小坑

    https://www.w3schools.com/TAGs/att_button_type.asp Definition and Usage The type attribute specifies ...

  3. SQL Data Compare 对比 SQLserver数据

    1. 下载redgate的工具 https://www.red-gate.com/dynamic/products/sql-development/sql-compare/download 2. 输入 ...

  4. Jquery 组 checkbox全选按钮

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  5. POJ1177(扫描线求周长并)

    题意:..求周长并... 解析:参考求面积并 图借鉴自:https://www.cnblogs.com/shuaiwhu/archive/2012/04/22/2464876.html 自下而上扫描 ...

  6. UVa - 10341

    Solve the equation:p ∗ e ^−x + q ∗ sin(x) + r ∗ cos(x) + s ∗ tan(x) + t ∗ x ^2 + u = 02 + u = 0where ...

  7. MT【40】一道联赛二试题

    让我通过这道题来演示如何利用切比雪夫多项式的内功心法: 评:如此大道至简,当年为之叫绝的精彩的做法

  8. 【BZOJ1820】[JSOI2010]快递服务(动态规划)

    [BZOJ1820][JSOI2010]快递服务(动态规划) 题面 BZOJ 洛谷 题解 考虑无脑四维\(dp\).\(f[i][a][b][c]\),表示当前处理到第\(i\)个任务,三辆车的位置分 ...

  9. BZOJ 4671 异或图 | 线性基 容斥 DFS

    题面 Description 定义两个结点数相同的图 G1 与图 G2 的异或为一个新的图 G, 其中如果 (u, v) 在 G1 与 G2 中的出现次数之和为 1, 那么边 (u, v) 在 G 中 ...

  10. POJ P3352 Road Construction 解题报告

    P3352 Road Construction 描述 这几乎是夏季,这意味着它几乎是夏季施工时间!今年,负责岛屿热带岛屿天堂道路的优秀人士,希望修复和升级岛上各个旅游景点之间的各种道路. 道路本身也很 ...