JQuery的引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
</script>
</html>
02-JQuery和window对比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="https://blog.51cto.com/ganbing/2056654 " >
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function () {
console.log('JS加载1');
}
window.onload=function () {
console.log('JS加载2');
}
window.onload=function () {
console.log('JS加载3');
}
</script>
<script type="text/javascript">
$(function () {
console.log('工厂函数1');
})
$(document).ready(function () {
console.log('工厂函数2');
})
$().ready(function () {
console.log('工厂函数3');
})
</script>
</html>
03-基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">
<h1>静夜思</h1>
<p class="content">床前明月光</p>
<p class="content">疑是地上霜</p>
<p class="content">举头望明月</p>
<p class="content">低头思故乡</p>
</div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('.box').css('color','red')
$('h1,p').css('color','blue');
})
</script>
</html>
04-子代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">
<h1>静夜思</h1>
<p class="content link">床前明月光</p>
<p class="content">疑是地上霜</p>
<p class="content">举头望明月</p>
<p class="content">低头思故乡</p>
</div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
})
</script>
</html>
05-属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">
<h1>静夜思</h1>
<p class="content" id="link">床前明月光</p>
<p class="content">疑是地上霜</p>
<p >举头望明月</p>
<p class="content">低头思故乡</p>
</div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('p[id][class*=con]').css('color','gray');
})
</script>
</html>
06-位置选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$('li:lt(3)').css('color','orange')
})
</script>
</html>
07-子元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<div>
<p>1</p>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
})
</script>
</html>
08-表单元素过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<p>姓名:<input type="text"></p>
<p>
<select name="">
<option value="郑州" selected="selected">郑州</option>
<option value="南阳">南阳</option>
<option value="安阳">安阳</option>
</select>
</p>
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女" />女
<br>
<button type="button" disabled="disabled">提交</button>
</form>
</body>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$(':enabled');
console.log($(':enabled'));
console.log($(':disabled'));
console.log($(':selected'));
console.log($(':checked'));
})
</script>
</html>
09-内容过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>4545</div>
<div></div>
<div>我们</div>
<div>的<span>九分</span>裤</div>
<div><span class="c1">分割</span></div>
<div>疯狂<span>赶快</span></div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$('span:not(.c1)').css('color','pink')
})
</script>
</html>
10-JQ对象与Dom对象的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">222</div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
var box=document.getElementsByClassName('box')[0];
console.log(box);
var jobj=$(box);
console.log(jobj);
var domObj1=$('.box')[0];
console.log(domObj1);
var domObj2=$('.box').get(0);
console.log(domObj2);
})
</script>
</html>
11-操作JQ集合遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$('p').each(function (index,ele) {
console.log(index);
console.log(ele);
})
})
</script>
</html>
12-根据元素查询在集合中的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p id="d1">3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var i=$('#d1').index('p');
console.log(i);
console.log($('p').toArray());
</script>
</html>
13-过滤方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<p>1</p>
<p ><span class="n1">2</span></p>
<p id="d1">3</p>
<p>4</p>
<p class="c1">5</p>
<p class="c2">6</p>
</div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('p').map(function (index,value) {
console.log(index);
console.log(value);
})
</script>
</html>