一、基本知识:
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); })