【jOuery入门和选择器】

一、基本知识：

1、jQuery的基本语法：

---

案例1；点击按钮弹出文本框的值

法1（js点击方式）：<script type="text/javascript">
//             window.οnlοad=function(){//匿名函数
//                 //拿到按钮
//                 var btn=document.getElementById("btna");
//                 //给按钮增加点击事件
//                 btn.οnclick=function(){
//                     var a=document.getElementById("aa").value;
//                     alert(a);
//                 }
//                     
//                 
//             }
        </script>

法2（jquery点击方式）：

<!-- 引入外部js=jQuery样式表 -->
        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

-----  引入类库
        <script type="text/javascript">
            
            // $(function(){//相对于widow.onload
            //拿到按钮
            //     var b=$("#btnb");
            //增加点击事件
            //     b.click(function(){
            //拿到文本框的值
            //     var a=$("#aa").val();
            //     alert(a);
            //         
            //     })
            //     })    
 

---

选择器的使用：

分为4类：基本选择器、表单选择器、层次选择器和过滤选择器

相关代码如下：

使用

even：偶数下标

odd: 奇数下标

gt: 大于

lt：小于

//2.3过滤选择器
						$("ul>li:even").css("background","yellow);//偶数下标
								$("ul>li:odd").css("background","yellow);//奇数下标
						$("ul>li:gt(0)").css("background","yellow);//gt大于0
								$("ul>li:lt(4)").css("background","yellow);//lt小于4
								//0>x>4
						$("ul>li:lt(4):gt(0)").css("background","yellow);//大于0小于4
})
								

* ：通配符

关系：父子关系 “ > ”

兄弟关系 ：“ + ” 后代关系

$(function() {
						//2.1基本层次选择器
						// $("#xx").css("background","green");//id选择器
						// $(".yy").css("background":"red","color":"blue");//类选择器
						// $("*").css("background","yellow");//通配符
 						$("div").css("background","yellow");//标签选择器=元素选择器
						$("p,span").css("background","yellow);//并集
 						$("div span").css("background","yellow);//交集后代标签span
						$("div>span").css("background","yellow);//父子关系
 						$("div+span").css("background","yellow);//兄弟关系
})

 并集：加逗号

交集：之间加空格

$("#ok").click(function() {
									
									$("table tr:even").css("background", "pink");
									$("table tr:odd").css("background", "blue");
									// 		

表单选择器：
<form action="" id="myForm">
			性别：<input type="radio" value="男" name="sex" />男
			<input type="radio" value="女" name="sex" />女<br />
			爱好：<input type="checkbox" value="吃鸡" />吃鸡
			<input type="checkbox" value="绘画" />绘画
			<input type="checkbox" value="飞车" />飞车<br />

			地址：
			<select>
				<option value="湖南省">湖南省</option>
				<option value="浙江省">浙江省</option>
				<option value="广东省">广东省</option>
			</select><br />

 表单隔行换色：

$("#ok").click(function() {
									
									$("table tr:even").css("background", "pink");
									$("table tr:odd").css("background", "blue");
									// 		
									//2.4表单选择器
									$("#ok").click(function() {
										//拿性别
										$("#myForm input :radio:checked").val();
										//拿爱好
										$("myForm input:checkbox:checked").each(function() {
											console.info($(this).val());
										})
										var address = $("myForm select option:selected").val();
										console.info(address);
									})