第一个jQuery
什么是jQuery?
简而言之,jQuery就是在JavaScript的基础上 写更少的代码,做更多的事情
语法格式:jQuery对象.方法
jQuery对象通过选择器获取,类似css中的选择器
<script type="text/javascript">
//js 执行时,有加载顺序
/* jQuery获得数据
* * 语法:$("选择器") == jQuery("选择器")
*
*/
var username = $("#username");
// * val()函数 用于获得 value属性的值
alert(username.val());
</script>
举例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>什么是jQuery选择器</title>
</head>
<style>
#myDiv{
border: 1px soild black;
width:300px;
height:300px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("第一个jQuery!");
$("#myDiv").css("background-color","red");
});
});
</script>
<body>
<input type="button" value="确定" id="btn" /><br />
<div id="myDiv">我是一个div</div>
</body>
</html>
代码结果显示:
解释:
id选择器:
$("#id")
class选择器:
$(".class")
ready()方法:代码在程序最后运行
为什么要有这个方法呢?在上面的这一长串代码,我故意把script写在了body的上方。众所周知程序 解析代码是从上往下执行的,程序在执行script代码时,并不知道body里有一个标签的id是myDiv,
<div id="myDiv">我是一个div</div>
故程序会报错。因此为避免这个错误一般会把script方法用 ready()方法包起来。
$(document).ready()
当id=btn的标签被点击时触发
$("#btn").click(function(){...})
jQuery对象和dom对象转换
<script type="text/javascript">
//1 使用javascript获得value值
var username = document.getElementById("username");
//alert(username.value);
//2 将 dom对象 转换 jQuery对象
// * 语法:$(dom对象)
// * 建议:jQuery对象变量名,建议为$开头
var $username = $(username);
// alert($username.val());
//3 将 jQuery对象 转换 dom对象
//3.1 jQuery对象内部使用【数组】存放所有的数据,可以数组的下标获取(索引)
var username2 = $username[0];
alert(username2.value);
//3.2 jQuery提供函数 get() 转换成dom对象
var username3 = $username.get(0);
alert(username3.value);
</script>
基础选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
div {
border: 1px solid black;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
//id选择器
$("#byId").css("background","pink");
//类选择器
//$(".byClass").css("background","#a0edbc");
//元素选择器
//$("p").css("color","red");
//通配符选择器
//$("*").css("background","yellow");
//$(".byClass,#byId").css("background","yellow");
});
});
</script>
</head>
<body>
<input type="button" value="确定" id="btn" /><br /><br />
<div id="byId">第一个元素,id为byId</div>
<p>第一个p元素</p>
<p class="byClass">第二个元素,类名为byClass</p>
<div class="byClass">第二个div元素,类名为byClass</div>
</body>
</html>
大家可以动手试一试
子元素选择器
基本
#id , id选择器,<xxx id=""> 通过id值获得元素
element,标签选择器,<xxx> 通过标签名获得元素
.class ,类选择器,<xxx class=""> 通过class值获得元素。注意:使用点开头
s1,s2,... 多选择器,将多个选择器的结果添加一个数组中。
--------------------------------------------
* 所有
jQuery对象.css(“background-color”,”red”);
层级
A B ,获得A元素内部所有的B后代元素。(爷孙)
A > B ,获得A元素内部所有的B子元素。(父子)
A + B ,获得A元素后面的第一个兄弟B。(兄弟)
A ~ B ,获得A元素后面的所有的兄弟B。(所有兄弟)
3.3 基本过滤
:first , 第一个
:last ,最后一个
:eq(index) ,获得指定索引
:gt(index) 大于
:lt(index) 小于
:even 偶数,从 0 开始计数。例如:查找表格的1、3、5...行(即索引值0、2、4...)
:odd 奇数
:not(selector) 去除所有与给定选择器匹配的元素
------------------------------
:header 获得所有标题元素。例如:<h1>...<h6>
:animated 获得所有动画
:focus 获得焦点
可见性过滤
:hidden 隐藏。特指 <xxx style="display:none;"> ,获得 <input type="hidden">
:visible 可见(默认)
属性
[属性名] 获得指定的属性名的元素
[属性名=值] 获得属性名 等于 指定值的 的元素【1】
[属性名!=值] 获得属性名 不等于 指定值的 的元素
[as1][as2][as3].... 复合选择器,多个条件同时成立。类似 where ...and...and【2】
---------------------------------------
[属性名^=值] 获得以属性值 开头 的元素
[属性名$=值] 获得以属性值 结尾 的元素
[属性名*=值] 获得 含有属性值 的元素
子元素过滤
:nth-child(index) ,获得第几个孩子,从1开始。
:first-child , 获得第一个孩子
:last-child , 获得最后孩子
:only-child , 获得独生子
表单过滤
:input 所有的表单元素。(<input> / <select> / <textarea> / <button>)
:text 文本框<input type="text">
:password 密码框<input type=" password ">
:radio 单选<input type="radio">
:checkbox 复选框<input type="checkbox">
:submit 提交按钮<input type="submit">
:image 图片按钮<input type="image" src="">
:reset 重置按钮<input type="reset">
:file 文件上传<input type="file">
:hidden 隐藏域<input type="hidden"> ,还可以获得<xxx style="display:none">
其他值:<br> <option> ,存在浏览器兼容问题
:button 所有普通按钮。 <button > 或 <input type="button">
表单对象属性过滤
:enabled 可用
:disabled 不可用。<xxx disabled="disabled"> 或<xxx disabled=""> 或 <xxx disabled>
:checked 选中(单选框radio、复选框 checkbox)
:selected 选择(下拉列表 select option)