jQuery学习笔记一
一.jQuery版本兼容
jQuery版本2以上不支持IE6,7,8浏览器。
如果需要支持IE6/7/8,那么请选择1.9
同样还可以通过条件注释在使用IE6/7/8时只包含进1.9
<!--[if lt IE ]>
<script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE ]><!-->
<script src="jquery-2.0.0.js"></script>
<!--<![endif]-->
1.HTML的元素选取
2.HTML的元素操作
3.HTML DOM遍历和修改
4.js特效和动画效果
5.css操作
6.HTML事件操作
7.ajax异步请求方式
三.选择器
通过$(":button")可以选取所以type="button"的<input>元素和<button>元素,如果去掉冒号,$("button")只能获取<button>元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#test1").click(function(){
$("button").hide();
});
$("#test2").click(function(){
$(":button").hide();
});
});
</script>
</head>
<body>
<p id="test1">点进这里测试 <b>button</b></p>
<p id="test2">点进这里测试 <b>:button</b></p>
<button>Button 按钮</button>
<input type="button" value="Input 按钮">
</body>
</html>
1.基本选择器
$("#id") //ID选择器
$("div") //元素选择器
$(".classname") //类选择器
$(".classname,.classname1,#id1") //组合选择器
2.层次选择器
$("#id>.classname ") //子元素选择器
$("#id .classname ") //后代元素选择器
$("#id + .classname ") //紧邻下一个元素选择器
$("#id ~ .classname ") //兄弟元素选择器
3.过滤选择器(重点)
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于4的li
$("li:gt(2)") //下标大于2的li
$("li:lt(2)") //下标小于2的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
3.2内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素
$("td:empty") //不包含子元素或者文本的空元素
$("div:has(selector)") //含有选择器所匹配的元素
$("td:parent") //含有子元素或者文本的元素
3.3可见性过滤选择器
$("li:hidden") //匹配所有不可见元素,或type为hidden的元素
$("li:visible") //匹配所有可见元素
3.4属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
$("div[id^='qq']") // id属性值以qq开头的div 元素
$("div[id$='zz']") // id属性值以zz结尾的div 元素
$("div[id*='bb']") // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤,同时满足两个属性的条件的元素
3.5状态过滤选择器
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
4.表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
jQuery学习笔记一的更多相关文章
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之插件开发(4)
jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
- jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
随机推荐
- iOS pods-xxxx-frameworks.sh:permission denied问题
找到Build Phases, 点开Embed Pods Frameworks 是不是看到了"${SRCROOT}/Pods/Target Support Files/Pods/Pods-f ...
- exports与module.exports,export与export default 之间的关系和区别
首先我们要明白一个前提,CommonJS模块规范和ES6模块规范完全是两种不同的概念. CommonJS模块规范 Node应用由模块组成,采用CommonJS模块规范. 根据这个规范,每个文件就是一个 ...
- vue2.0 微信oauth认证的正确调用位置
运行在微信端的项目,很重要的环节是oauth认证:那在vue项目中,在何时何地调用oauth认证最合适呢? 经过观察,在项目启动过程中,会执行main.js文件:所以我将认证放在main.js中操作: ...
- 关于linux下的date日期,并以日期给文件命名
在linux的终端中,我们输入date后会有以下显示: 然后博主也扩展了一下date的基础用法: date + "%-": %y 输出年份的后2位:%Y 输出完整年份 %m 输出月 ...
- Java框架之Mybatis(二)
本文主要介绍 Mybatis(一)之后剩下的内容: 1 mybatis 中 log4j的配置 2 dao层的开发(使用mapper代理的方式) 3 mybatis的配置详解 4 输入输出映射对应的类型 ...
- 微信小程序——获取openid
1.在微信小程序后台得到appid.AppSecret 2.在任意小程序界面的[onLoad]中取得code(建议将代码写在index.js中) 3.用取得code换取openid 如后台无法将ope ...
- 使用elk转存储日志
ELK指的是由Elastic公司提供的三个开源组件Elasticsearch.Logstash和Kibana. Logstash:开源的服务器端数据处理管道,能够同时 从多个来源采集数据.转换数据,然 ...
- 项目架构开发:数据访问层之UnitOfWork (补充)
应lisansi同学回复(项目架构开发:数据访问层之UnitOfWork)要求,补上Dapper的DbContext实现 using Dapper.Contrib.Extensions; using ...
- Hadoop(十六)之使用Combiner优化MapReduce
前言 前面的一篇给大家写了一些MapReduce的一些程序,像去重.词频统计.统计分数.共现次数等.这一篇给大家介绍的是关于Combiner优化操作. 一.Combiner概述 1.1.为什么需要Co ...
- HDU 2504 又见GCD(最大公约数与最小公倍数变形题)
又见GCD Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...