jQuery基础 (一)——样式篇(jQuery选择器)

简介: 一、选择器类型 id选择器 class选择器 元素选择器 层级选择器 全选择器(*选择器) 二、有几种方式可以隐藏一个元素: CSS display的值是none。 type="hidden"的表单元素。

一、选择器类型

  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')
})

 

目录
相关文章
|
7月前
|
JavaScript 索引
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
128 2
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
106 5
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
105 0
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
123 0
|
11月前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
131 7
|
11月前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$("p") 选取所有段落元素,而 $("button").click(function(){ $("p").hide(); }) 实现点击按钮后隐藏所有段落。
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
JavaScript
jQuery 选择器
jQuery 选择器
82 3