jQuery选择器笔记
1.$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
2.把所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
--- jQuery functions go here ----
});是为了防止文档在完全加载(就绪)之前运行 jQuery 代码
3.jQuery元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
例子:将p元素对应的背景颜色改为红色
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");
});
});
4.JQuery属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
5.更多的选择器
$("ul li:first") 每个<ul>的第一个<li>元素
$("[href$='.jpg']")所有带有以".jpg"结尾的属性值的href属性
$("div#intro.head") id="intro"的<div>元素中的所有class="head"的元素
$(".ex .hide").click(function(){ class为ex中的class为hide的元素
$(this).parents(".ex").hide("slow");
});
jQuery选择器笔记的更多相关文章
- [javascript]jquery选择器笔记
技术文档 中文:http://jquery.cuishifeng.cn/ 英文:http://api.jquery.com/category/selectors/ 分类 基本选择器 层次选择器 过滤选 ...
- jQuery 选择器笔记
jquery基础选择器 $('选择器') 基本上与css选择器相同 demo $('ul li') $('.nav') $('#box') 隐试迭代 遍历内 ...
- Jquery选择器小结
1.基本选择器 $("#id") //ID选择器 $("div") //元素选择器 $(".classname") //类选择器 $(&qu ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- 锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单 示例2-1 使用javascript实现隔行变色 < ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- 笔记:FastAdmin 之 jQuery 选择器 $("[name$='[]']", form) 学习
笔记:FastAdmin 之 jQuery 选择器 $("[name$='[]']", form) 学习 $("[name$='[]']", form)这个是什 ...
随机推荐
- ReSharper详解Index0
JetBrains ReSharper可以帮助Visual Studio用户编写出更好的代码.支持对C#,VB.NET,XAML,JavaScript,TypeScript,JSON,XML,HTML ...
- python_单元测试unittest
Python自带一个单元测试框架是unittest模块,用它来做单元测试,它里面封装好了一些校验返回的结果方法和一些用例执行前的初始化操作. 步骤1:首先引入unittest模块--import un ...
- 机器指令翻译成 JavaScript —— No.4 动态跳转
上一篇,我们用模拟流程的方式,解决了跳转问题. 不过静态跳转,好歹事先是知道来龙去脉的.而动态跳转,只有运行时才知道要去哪.既然流程都是未知的,翻译从何谈起? 动态跳转,平时出现的多吗?非常多!除了 ...
- Flexbox 自由的布局
css3提出了一种新的布局方式.她并没有以摧枯拉朽之势博得我的喜爱.我和她的故事总是伴随着苦涩的味道.世道变了,总要做出些选择才能跟紧步伐.她很强大,能满足你天马行空的需求而不必抓掉一大把头发.她却很 ...
- Promise的前世今生和妙用技巧
浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...
- CSharpGL(20)用unProject和Project实现鼠标拖拽图元
CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...
- tomcat RMI 停不掉
项目采用jfinal框架,做了一个RMI的服务,对其它程序提供服务.实现上,写了一个RmiPlugin package com.wisdombud.cloudtalk.plugin; import j ...
- redis成长之路——(七)
扩展性封装 虽说现在StackExchange.Redis免费,万一到时候和servicestack.redis一样要收费呢,所以先留一口,后续的可以再处理 实例代码点击这里查看 redis成长之路- ...
- linux tree 命令
使用cmder确实是方便了很多,想看命令帮助信息: $ help tree 以图形显示驱动器或路径的文件夹结构. TREE [drive:][path] [/F] [/A] /F 显示每个文件夹中文件 ...
- 8.GitHub实战系列~8.使用GitHub建立自己的免费博客
github实战汇总:http://www.cnblogs.com/dunitian/p/5038719.html 创建一个用户名.github.io的仓库 选择设置页面风格 页面基本信息 选择一个你 ...