第一个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）
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
