【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);
									})

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值