01选择器的回顾
什么是jQuery以及其基本语法：
例如： 如何用jQuery去获取文本框的值? id="aa"
$("#aa").val();
js的window.onload在jQuery里如何表示?
$(document).ready(function(){});
$(function(){})
jQuery里如何动态设置样式css的? 单个属性和多个属性的区别?
$("div").css("color","red");
$("div").css({键:值,键:值});
jQuery的事件?点击事件?失焦事件?该如何表示?等等
$("#btn").click/blur/mouseover(function(){})
开发版本
生产版本
测试版本
推荐自学网址：
1.https://jquery.cuishifeng.cn/（在线API文档）
2.http://www.w3school.com.cn/(w3school 在线教程)
推荐使用浏览器：谷歌
推荐使用开发工具：HBuilder
一、入门
W:What jQuery是一个封装了很多js的类库
W:Why 为了简化js的开发
W:Where 中大型网站的开发 是很多前端框架的基础
H:How 三部曲
二、选择器
基本：#id .class 标签 * 并集 交集
层次：> +
过滤：:first :last :eq() :even :odd :gt :lt
表单：:checked :selected :radio :checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery02:工具方法&属性CSS</title>
<style type="text/css">
.xx{
border:solid red 5px;
}
.aaa{
background-color:#00FFF;
}
.bbb{
background-color:#FE6400;
}
</style>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 一.$工具方法
// 1.1$.each()遍历数组，对象的数据
// 定义对象{}
// var stu={"name":"牛逼","age":38};
// 遍历对象
// console.info(stu.name,stu.age);
// $.each(stu.function(k,v){//key,value 一个是下标,一个是内容
// console.info(v);//k可以不打印,但是不能在调方法的省略
// })
//定义数组[]
// var names=["欧小","欧米","欧旺","欧华"];
// // 遍历数组
// $.each(names,function(i,n){//下标,元素
// console.info(n);
// })
// 定义数组[{},{}]
// var stus=[{"name":"大牛逼","age":38};{"name":"小牛逼","age":28}];
// 遍历数组
// $.each(stus,function(i,s){
// console.info(s.name,s.age);//方式一
// $.each(s.function(k,v){//方式二
// console.info(v);
// })
// })
//1.2 $.trim()去除前后空格
// var str=" zking ";
// console.info($.trim(str).length);
// 1.3 $.type() 得到数据类型
// var stu={"name":"牛逼","age":38};
// var stus=[{"name":"大牛逼","age":38};{"name":"小牛逼","age":28}];
// var str=1.5;
// console.info($.type(stus));
// 1.4 $.isFunction() 判断是否是函数
// var stu={"name":"牛逼","age":38};
// // console.info($.isFunction(stu));
// console.info($.isFunction(myf));
// 1.5 $.isArray()判断是否是数组
// var stu={"name":"牛逼","age":38};
// var stus=[{"name":"大牛逼","age":38};{"name":"小牛逼","age":38}];
// console.info($.type(stus));
// 1.6 $.parseJSON() 解析json格式的字符串---->js的数组/对象
// 定义对象的字符串
// var stuStr='{"name":"牛逼","age":38}';
// console.info($.type(stuStr));
// 对象字符串---->对象
// var stu= $.parseJSON(stuStr);
// console.info($.type(stu));
// console.info(stu.name,stu.age);
// $.each(stu,function(k,v){
// console.info(v);
// })
// 定义对象数组的字符串
// var stus=[{"name":"大牛逼","age":38};{"name":"小牛逼","age":38}];
// 转换js的对象数组
// console.info($.type(stusStr));
// var stus=$.parseJSON(stusStr);
// console.info($.type(stus));
// 遍历对象数组
// $.each(stus,function(a,b){
// console.info(a,b.name,b.age)
// })
// 二. 属性和CSS
// 2.1 attr() 拿值 设值
// var mpath=$("#aa").attr("src");
// console.info(mpath);//拿值
//设值
// $("#aa").attr("src","img/1.jpg");
// $("#aa").attr("width","200px");
// 2.2 removeAttr() 移除属性值
// $("#aa").removeAttr("src");
// $("#aa").removeAttr("width");
// 2.3 addClass() 动态增加样式
// $("#aa").addClass("xx");//样式的叠加
// $("#aa").attr("class","xx");//样式的替换
// 2.4 removeClass() 删除对应的样式
// $("#aa").removeClass("xx");
//prop和attr的区别 属性值是boolean类型的时候
// 给图片增加name值
// $("#aa").attr("name","abc");
// $("#aa").prop("name","abc");
//2.5prop和attr的区别 prop适合用于属性值是boolean类型的时候
// $("#ok").click(function(){
// $(".abc").prop("checked",true);
// })
//
// $("#nook").click(function(){
// $(".abc").prop("checked",false);
//
// })
// 案例3:优化表格隔行换色
// $("table tr:even").addClass("aaa");
// $("table tr:even").addClass("bbb");
// 2.6thml()和text()的区别
// var a=$("p").html();//会包含子标签
// console.info(a);
// var b=$("p").text();//只会打印纯文本
// console.info(b);
// 2.7 拿值 设值
// 拿文本框的value的值
// var a$("#wc").val();
// console.info(a);
// 赋值
// $("#wc").val("哈哈哈");
// CSS
// 1.设置值
$("p").css("background","rgba(255,0,0.5)");//单属性
// $("p").css({"background":"yellow","color":"red"})//多属性
// 2.拿值
var a=$("p").css("background");
console.info(a);
})
</script>
</head>
<body>
<input type="text" id="wc"/>
<p>心疼他们三个<span>1秒钟</span></p>
<img src="img/21.png" width="300px" id="aa" class="yy"/>
<hr/>
<input type="button" value="全选" id="ok">
<input type="button" value="取消全选" id="nook">
<input type="checkbox" class="abc" value="植物大战僵尸"/>植物大战僵尸
<input type="checkbox" class="abc" value="打王者"/>打王者
<input type="checkbox" class="abc" value="打吃鸡"/>打吃鸡
<table type="1px" width="50%">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<pre>
</pre>
</body>
</html>
总结
1.定义数组[]
2.定义对象{}
3.定义数组[{},{}]
4
.addClass();//样式的叠加
.attr();//样式的替换
5 prop和attr的区别 prop适合用于属性值是boolean类型的时候
974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
