一、写法
$("#id")
//替换 document.getElementById("#id")
$(".class")
//替换 document.getElementByClassName(".class")
$("div")
//替换 document.getElementByTagName("div")
$("li:odd")
//odd:奇数 even:偶数
//不管是兄弟姐妹还是父亲儿子
$("li:eq(1)")
//eq: equal 的缩写,写的是找到下标为1的li 下标从0开始
//eq:只能改一个!!!!!!!!!!!
$("li":lt(2)")
//lt: less than 小于; gt: greater than 大于;
$("li:first")
//first 找到第一个li
注意:
- $是jQuery的选择器符号,里面的内容就是要查找的HTML元素的描述,内容必须写在单引号或者双引号之内
- 上面的代码中所有的缩写(odd/even/eq等等)都是从0开始的
- jQuery文件需要和html文件放在同一个文件夹下
- jQuery文件的名字你不要给我瞎改啊
.html() //内容
.css() //样式 一次只能改一个属性
.attr() //属性 attribute,记住这个单词,属性
jQuery的开始函数:
//最常用方式:
$(function(){
//你喜欢的代码
})
//有点麻烦但是看着很多的代码:
$(document).ready(function(){
//真好
//ready是在文件加载完成后
});
复习一些简单的css例子:
//①
$("li:nth-child(odd)")
//nth-child是从1开始数的
//同一个父元素下的奇数个li, 每个元素下面的li子元素都单独计算。
//②
$("ul li a") //ul 里的 li 里的 a
//③
$("ul li") //找到ul中所有的li(包含儿子孙子,子子孙孙,世世代代无穷尽也,人真多)
$("ul>li") //找到ul下面的儿子li(>只是儿子,不能找到孙子)
//④
$("li:has(a)")' //找到含有a的li标签
//⑤
$(ul.listUL) //找到ul,并且这个ul的类名叫做listUL
//⑥
$(span, #one) //找到span标签和id叫做one的标签
//⑦
$("a[title]") //找到有title属性的a
练习一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function(){
alert("hello,jQuery!");
//在js中修改css效果
$("body").css("background","blue");
//$("body")先选择body
//.css()中修改css效果 用逗号连接要修改的样式名称和赋予的值
});
</script>
</body>
</html>
运行效果:
点击“确定”后:
练习二:(袁磊老师最爱的盒子box变换,希望老师在我们毕业之后能学一下b-box,带b的box会比较炫酷一些,效果请在自己的编译器上运行,功能多)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box,span{
width:250px;
height: 250px;
border:1px solid #ccc;
margin:10px;
float:left;
}
.son{
width:40%;
margin:4%;
height:100px;
border:1px solid #ccc;
background:#bfa;
float:left;
}
.cur{
border-style:dotted;
border-radius: 50%;
}
</style>
</head>
<body>
<button>改變所有的box</button>
<button>改變所有的小盒子</button>
<button>改变第二个大盒子里的所有小盒子</button>
<button>改变所有小盒子里的文字的内容</button>
<button>改变所有的大盒子里的第二个小盒子</button>
<button>改变第三个大盒子里的第二个小盒子的内容</button>
<button>改变所有大盒子里的第一和第三个小盒子</button>
<button>改变span</button>
<button>1</button>
<button>1</button>
<button>1</button>
<div id="jq">
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<span>span</span>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("button:first").click(function(){
//看见了么,上面的click就是点击事件了,并且在function中放入你要进行的操作和改变
$(".box").css("background","#ff0")
//将所有的box变换颜色
});
$("button:eq(1)").click(function(){
//选择器这里还有问题的就会去看选择器的知识点吧,button:eq(1)是第二个button,不算是第一个,再说一遍不是第一个,是从0开始的!!!还要人说多少遍呐!
$(".son").addClass("cur");
//给这个玩应添加一个新的类名,叫做cur
});
$("button:nth-child(3)").click(function(){
$(".box:eq(1) .son").addClass("cur");
//第二个大盒子里的所有的类名叫做son的小盒子,给他们都添加一个新的类名,叫做cur
})
$("button:nth-child(4)").click(function(){
$(".son").html("袁磊");
//当点击这些.son的时候,将里面的文字改为“袁磊”
})
//后面的几个功能不放了,自己做去
});
</script>
</body>
</html>
后续截图不放了,自己玩去吧,代码都给你们玩耍,拿去拿去