Skip to content

Commit 9db3e36

Browse files
LinJingOKLinJingOK
committed
整理代码
1 parent 3b02bb7 commit 9db3e36

File tree

86 files changed

+5429
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+5429
-0
lines changed

‎.idea/.gitignore

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/jQuery-study.iml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/misc.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/vcs.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jQuery学习/.idea/jQuery学习.iml

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jQuery学习/.idea/jsLibraryMappings.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jQuery学习/.idea/misc.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jQuery学习/.idea/modules.xml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jQuery学习/.idea/workspace.xml

+90
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jQuery学习/01-jquery的基本使用/01-jQuery的基本使用.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Title</title>
7+
<script src="jquery.min.js"></script>
8+
<style>
9+
div {
10+
width: 500px;
11+
height: 300px;
12+
background-color: cyan;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<script>
19+
$('div').hide();
20+
//1.等着页面DOM加载完毕再去执行js代码
21+
$(document).ready(function () {
22+
$('div').hide();
23+
});
24+
//2.等着页面DOM加载完毕再去执行js代码
25+
$(function () {
26+
$('div').hide();
27+
});
28+
console.dir($('div'));
29+
//3.jQuery对象只能使用jQuery方法 DOM对象则使用原生的javeScript属性和方法
30+
31+
</script>
32+
<div></div>
33+
</body>
34+
35+
</html>

‎jQuery学习/01-jquery的基本使用/02-jQuery的顶级对象$.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
<script src="jquery.min.js"></script>
7+
<style>
8+
div {
9+
width: 300px;
10+
height: 500px;
11+
background-color: deeppink;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<div></div>
17+
<script>
18+
//1.$是jQuery的别称
19+
// $(function () {
20+
// alert(11);
21+
// });
22+
//或者
23+
jQuery(function () {
24+
alert(11);
25+
});
26+
//$ 是jQuery的顶级对象 相当于js中的window
27+
</script>
28+
</body>
29+
</html>

‎jQuery学习/01-jquery的基本使用/03-jQuery对象和DOM对象.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
<script src="jquery.min.js"></script>
7+
<style>
8+
div {
9+
width: 500px;
10+
height: 300px;
11+
background-color: cyan;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<div></div>
17+
18+
<span></span>
19+
<script>
20+
//1.DOM对象： 用原生js获取过来的对象就是DOM对象
21+
var myDiv = document.querySelector('div'); //myDiv是DOM对象
22+
var mySpan = document.querySelector('span'); //myDiv是DOM对象
23+
//2.jQuery对象：用jQuery方式获取过来的是jQuery对象 本质： 通过$把DOM元素进行了包装
24+
$('div');//$('div');是一个jQuery对象
25+
$('span')//$('soan');是一个jQuery对象
26+
27+
</script>
28+
</body>
29+
</html>

‎jQuery学习/01-jquery的基本使用/04-DOM对象和jQuery对象的相互转换.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=vie, initial-scale=1.0">
6+
<title>Document</title>
7+
</head>
8+
<body>
9+
<video src="mov.mp4" muted></video>
10+
<script>
11+
//1.DOM对象转换为jQuery对象
12+
//（1）我们已经使用原生js 获取过来DOM对象
13+
var myvideo = document.querySelector('video');
14+
//2.jQuery对象转换为DOM对象
15+
myvideo.play();
16+
$('video')[0].play();
17+
$('video').get(0).play();
18+
</script>
19+
</body>
20+
</html>

‎jQuery学习/01-jquery的基本使用/07-jQuery筛选选择器.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<script src="jquery.min.js"></script>
8+
</head>
9+
<body>
10+
<ul>
11+
<li>多个里面筛选几个</li>
12+
<li>多个里面筛选几个</li>
13+
<li>多个里面筛选几个</li>
14+
<li>多个里面筛选几个</li>
15+
<li>多个里面筛选几个</li>
16+
</ul>
17+
<ol>
18+
<li>多个里面筛选几个</li>
19+
<li>多个里面筛选几个</li>
20+
<li>多个里面筛选几个</li>
21+
<li>多个里面筛选几个</li>
22+
<li>多个里面筛选几个</li>
23+
</ol>
24+
<script>
25+
$(function(){
26+
$("ul li:first").css("color", "red");
27+
$("ul li:eq(2)").css("color", "blue"); //从0开始
28+
$("ol li:odd").css("color", "skyblue"); //奇数
29+
$("ol li:even").css("color", "pink"); //偶数
30+
31+
})
32+
</script>
33+
</body>
34+
</html>

‎jQuery学习/01-jquery的基本使用/08-jQuery的筛选方法.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
</head>
8+
<body>
9+
<div class="father"> father
10+
<div class="son">son</div>
11+
</div>
12+
13+
<div class="nav">
14+
<p>p儿子</p>
15+
<div>
16+
<p>p孙子</p>
17+
</div>
18+
</div>
19+
<script>
20+
//注意一下都是方法 带括号
21+
$(function(){
22+
//1.父 .parent() 返回的是最近一级的父级元素 亲爸爸
23+
$('.son').parent();
24+
25+
//2.子
26+
//（1）亲儿子 chredildren（） ul>li
27+
//$('.nav').children('p').css('color', "pink")
28+
//所有的孩子 包括儿子和孙子 find（）
29+
$('.nav').find('p').css('color', "red")
30+
//3.兄
31+
})
32+
</script>
33+
</body>
34+
</html>

0 commit comments

Comments
 (0)