jq基础（2）
jquery的选择器
基本选择器
id选择器：$(“#id名称”);
元素选择器：$(“元素名称”);
类选择器：$(“.类名”);
通配符：*
多个选择器共用(并集)
案例代码：
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","pink");
});
$("#btn2").click(function(){
$(".mini").css("background-color","pink");
});
$("#btn3").click(function(){
$("div").css("background-color","pink");
});
$("#btn4").click(function(){
$("*").css("background-color","pink");
});
$("#btn5").click(function(){
$("#two .mini").css("background-color","pink");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择为one的元素"/>
<input type="button" id="btn2" value="选择样式为mini的元素"/>
<input type="button" id="btn3" value="选择所有的div元素"/>
<input type="button" id="btn4" value="选择所有元素"/>
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
代码演示：
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","pink");
});
$("#btn2").click(function(){
$("body>div").css("background-color","pink");
});
$("#btn3").click(function(){
$("#two+div").css("background-color","pink");
});
$("#btn4").click(function(){
$("#one~div").css("background-color","pink");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素"/>
<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
Ø 基本过滤选择器
$('li').first() 等价于：$(“li:first”)
代码案例演示：
<html>
<head>
<meta charset="UTF-8">
<title>基本过滤选择器</title>
<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div:first").css("background-color","pink");
});
$("#btn2").click(function(){
$("div:last").css("background-color","pink");
});
$("#btn3").click(function(){
$("div:odd").css("background-color","pink");
});
$("#btn4").click(function(){
$("div:even").css("background-color","pink");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="body中的第一个div元素"/>
<input type="button" id="btn2" value="body中的最后一个div元素"/>
<input type="button" id="btn3" value="选择body中的奇数的div"/>
<input type="button" id="btn4" value="选择body中的偶数的div"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
Ø 属性选择器
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","pink");
});
$("#btn2").click(function(){
$("div[id='two']").css("background-color","pink");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择有id属性的div"/>
<input type="button" id="btn2" value="选择有id属性的值为two的div"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
Ø 表单选择器
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$(":input").css("background-color","pink");
});
$("#btn2").click(function(){
$(":text").css("background-color","pink");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择所有input元素" />
<input type="button" id="btn2" value="选择文本框" />
<br/>
<form>
<input type="text[ThinkPad1] " /><br />
<input type="checkbox" /><br />
<input type="radio" /><br />
<input type="image" /><br />
<input type="file" /><br />
<input type="submit" />
<input type="reset" /><br />
<input type="password" /><br />
<input type="button" /><br />
<select><option/></select><br />
<textarea></textarea><br />
<button></button>
</form>
</body>
</html>
jq基础（2）的更多相关文章
- jQuery源代码解析（1）—— jq基础、data缓存系统
闲话 jquery 的源代码已经到了1.12.0版本号.据官网说1版本号和2版本号若无意外将不再更新,3版本号将做一个架构上大的调整.但预计能兼容IE6-8的.或许这已经是最后的样子了. 我学习jq的 ...
- JQ基础之选择器
JQ选择器与CSS/CSS3选择器非常类似,对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器. ID选择器 $('#one') ( '#'代表ID ) CLASS选择器 $ ...
- 网页JQ基础之jq-隐藏以及显示特效
简单的 隐藏以及显示的 JQ 的代码如下: <!DOCTYPE html> <html> <head> <script src="/jquery/j ...
- JQ基础练习---图片划过变暗
简单分享下,划过一张图片其余图片变暗,图片划过变暗的简单效果,JQ实现主要是css写法跟思路变化. <script src="http://ajax.googleapis.com/aj ...
- jq基础
$(function() { $(".dd").attr("class","cc").append("<h ...
- 《锋利的JQ》摘抄（一） jq基础篇
前言:第一次写博客有点紧张233333,我会在博客里放一下在赌这本书过程中遇到的一些有用的知识点,希望等帮助到大家.好了正题开始(只要是我不知道该说啥了= =) 一,资源(在w3cfuns资源中可以 ...
- js/jq基础（日常整理记录）-1-纯js格式化时间
一.纯js格式化时间 之前记录了一些,工作中发现的比较常用的使用,就记录一下. 由于很基础,就直接贴出来了,不做分析了. 改造一下Date的原型 Date.prototype.format = fun ...
- 陆、jq基础语法
一.概述:更加方便的处理html文档.events事件.动画效果和ajax交互等. 1.jq主要功能: (1)访问页面框架的局部. (2)修改页面表现 (3)更改页面的内容 (4)响应事件 (5)为页 ...
- dom与jq基础使用
js有两种运行环境,一个是浏览器,一个是服务器(NodeJS) js的本质是es,因为运行环境的不同,为了操作环境内的api做了升级 在浏览器上js分为es + dom + bom 在服务器上js又有 ...
- 【JQ基础】DOM操作
内部插入:append() //向每个匹配的元素内部追加内容,可包含 HTML 标签 $(selector).append(function(index,html)) /*•index - 可选.接收 ...
随机推荐
- mybatis（六）：设计模式 - 建造者模式
- Apache Kafka（十）Partitions与Replication Factor 调整准则
Partitions与Replication Factor调整准则 Partition 数目与Replication Factor是在创建一个topic时非常重要的两个参数,这两个参数的取值会直接影响 ...
- CSP2019第一轮游记
Day -1 发现还有\(2\)天就初赛了\((?)\) 赶紧复习\(ing\) 然后基础知识基本上都不知道 后面的大题--全靠蒙 感觉第一轮就要\(\mathrm{AFO}\)啊\(QwQ\) Da ...
- selenium定位方法-iframe元素定位方法
在自动化测试中,如果无法定位到一个元素,那么最大的可能是定位的元素是在iframe框架中,iframe对象代表一个HTML的内联框架,在HTML中,iframe每出现一次,一个iframe对象就会被创 ...
- 转载：EQ--biquad filter
http://www.musicdsp.org/files/Audio-EQ-Cookbook.txt https://arachnoid.com/BiQuadDesigner/index.html ...
- bugku web4
打开打开,刚刚有个sb问我借lol号玩,浪费时间 继续干正事 随便输入后,提示 再好好看看... 出题人语文肯定不好 ,,,应该是这个 ‘再’ 吧 那我们查看源码 将那么明显的两行 进行 ...
- buuctf wireshark
首先下载文件夹 然后用wireshark进行分析 然后发现啥也不会然后查一下资料https://www.jianshu.com/p/55ec409c739e 然后根据资料找了tcp然后根据解析做出此题 ...
- Django框架-模板层
Django框架-模板层 一.模板语法传值 1.验证是否python所有的数据类型都可以传递到前端 locals()的妙用:该方法虽然好用,但是在某些情况下会造成资源的浪费 结论:整型.浮点型.字符串 ...
- yum源文件
yum源文件 2017年11月22日 11:59:36 cakincqm 阅读数 1052更多 分类专栏: Linux 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附 ...
- MyBatis-Spring整合之方式3
通过注解整合 1.在UserDao同级目录下新建接口UserMapper,内容如下: public interface UserMapper { @Select("select * from ...