JQuery常用知识点及示例
1、JQuery 名称解释
JQuery是封装了常用JS操作函数的一个库文件
JQuery = Javascript + Query (查询)
Jquery意思即指: 强大的DOM节点查询
2、官网:http://jquery.com/
JQuery2.*不再支持IE6、7、8，上线环境使用压缩版可以省带宽
3、基本选择器
同CSS选择器
<body>
<div id="test1">id test1</div>
<div class="test2">class test2</div>
<div class="test2">class test2</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
<script>
// id选择器
$('#test1').css('background' , 'gray');
// 标签选择器
$('p').css('background' , 'blue');
// 类选择器
$('.test2').css('background' , 'green');
// *
$('*').css('background','pink');
</script>
4、层次选择器
<p>
<input type="text" />
<span>1</span>
<span>2</span>
</p>
<p>
<input type="text" />
<span>3</span>
<span>4</span>
</p>
<p>
<input type="text" />
<span>5</span>
<span>6</span>
</p>
<div><span>7</span></div>
<script>
// div下的span
$('div span').css('background' , 'orange');
// 每个prev元素之后的1个next元素被选中
//$('input + span').css('background' , 'gray');
// 每个prev元素之后的所有同辈siblings元素
$('input ~ span').css('background' , 'gray');
</script>
5、属性选择器
<body>
<p>Email:<input type="text" name="email" /></p>
<p>密码:<input type="text" name="password" /></p>
<p>重复密码:<input type="text" name="repassword" /></p>
<p>学号:<input type="text" name="stunum" /></p>
<p>学分:<input type="text" name="stuscore" /></p>
</body>
<script>
$('input[name="email"]').css('background' , 'gray');
$('input[name!="email"]').css('background' , 'blue');
//找包含password的属性
$('input[name*="password"]').css('background' , 'pink');
//找开头是stu的属性
$('input[name^="stu"]').css('background' , 'orange');
//找以word结尾的属性
$('input[name$="word"]').css('background' , 'red');
</script>
6、基础过滤器(配合选择器使用)
<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
</ul>
</body>
<script>
$('li:first').css('background','red'); // 找第1个
$('li:odd').css('background','blue'); // 找奇数个,从0计数
$('li:even').css('background','blue'); // 找偶数个,从0计数
$('li:eq(2)').css('background' , 'purple'); // 找第2个,从0计数
</script>
7、内容过滤器
<body>
<table border="1">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张飞</td>
<td>男</td>
<td>26</td>
</tr>
<tr>
<td>孙尚香</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>赵云</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>花木兰</td>
<td></td>
<td><span>22</span></td>
</tr>
</table>
<p><br /></p>
<p>a</p>
<p></p>
</body>
<script>
$('td:contains("女")').css('background' , 'blue'); // 含有"女"的td
$('td:empty').css('background' , 'green'); // 空的td
$('td:has(span)').css('background' , 'pink'); // 含有span的td
$('p:parent').css('background' , 'black'); // 有内容的p标签,(当爹的p标签)
</script>
前面介绍的都是找对象的方法，接下来我们来操作对象
8、操作普通属性
attr一个参数是获取属性，两个参数是赋值
<body>
<img src="on.jpg" alt="" onclick="bian()" />
</body>
<script>
function bian() {
if($('img').attr('src').indexOf('on') > -1) {
$('img').attr('src' , 'off.jpg');
} else {
$('img').attr('src' , 'on.jpg');
}
}
</script>
9、操作css属性
css()传一个值是获取属性值，传两个是赋值
因为width和height操作频繁，jquery给我们封装了width()和height()方法直接获取宽高
<style>
div {
width: 300px;
height: 300px;
border: 1px solid blue;
}
</style>
<body>
<h1>jQuery操作CSS属性</h1>
<div onclick="bian();">点击宽高+10px</div>
</body>
<script>
function bian() {
var w = parseInt( $('div').css('width') );
var h = parseInt( $('div').css('height') );
var b = parseInt( $('div').css('borderBottomWidth') );
$('div').css('width' , w+10+'px');
$('div').css('height' ,h+10+'px');
$('div').css('borderBottomWidth' ,b+1+'px');
}
/*
function bian() {
var w = $('div').width();
var h = $('div').height();
var b = parseInt($('div').css('borderBottomWidth'));
$('div').css('width' , w+10+'px');
$('div').css('height' , h+10+'px');
}*/
</script>
10、删除节点（remove）
增加节点(append)
a.after(b) 在a后增加b
a.before(b)在a前面加b
<body>
<input type="button" value="清空ul" onclick="qing()" />
<input type="button" value="删除ul" onclick="shan()" />
<input type="button" value="增加li" onclick="zeng()" />
<input type="button" value="再增" onclick="zeng2()" />
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li onclick="alert('当')">导航4</li>
</ul>
</body>
<script>
function qing() {
$('ul').empty();
}
function shan() {
$('ul').remove();
}
function zeng() {
//$('<li>导航五</li>').appendTo($('ul')); //加在ul后
$('ul').append($('<li>导航6</li>'));
}
function zeng2(){
$('ul').after($('<ol><li>哈哈</li></ol>'));
$('ol').append($('ul li:last'));
}
</script>
11、节点包裹
<body>
<h1>jQuery包结点</h1>
<input type="button" value="用p标签包住每个input" onclick="wp()" />
<input type="button" value="用p标签包住所有input" onclick="wpa()" />
<input type="button" value="li中的文字加粗" onclick="cu()" />
<input type="text" name="" id="" />
<input type="text" name="" id="" />
<input type="text" name="" id="" />
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
</body>
<script>
//给input标签分别加上p标签
function wp() {
$('input:text').wrap('<p></p>');
}
//给input标签整体加上一个p标签
function wpa() {
$('input:text').wrapAll('<p></p>');
}
//将li变粗
function cu() {
$('li').wrapInner('<b></b>');
}
</script>
12、jquery对象与DOM对象的关系
<body>
<h1>jQuery对象与DOM对象的关系</h1>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
<p id="test">test</p>
</body>
<script>
console.log($('li')); //jQuery对象,dom对象被放置在jQuery对象内部
$('li')[0]; //这个是存储在jQuery对象内的第1个li DOM对象
// jQuery对象与DOM对象的转换
var li = $('li').get(1); // 得到第1个li
li.style.background = 'blue';
var li3 = document.getElementsByTagName('li')[3];
$(li3).css('background' , 'green'); //DOM对象li3作为参数传给$(),转为jQuery对象
</script>
13、jquery动画
2秒消失的div
<style>
div {
width: 400px;
height: 400px;
background: blue;
}
</style>
<body>
<div></div>
</body>
<script>
$('div').click(function(){
$(this).hide(2000);
});
</script>
向上收起的广告图
<body>
<div id="ad">
<img src="./sm.jpg" alt="" />
</div>
</body>
<script>
$('#ad').delay(3000).slideUp(2000); //slideUp、slideDown
</script>
图片淡入淡出
<body>
<div id="ad">
<img src="t.jpg" alt="" />
</div>
</body>
<script>
// $('#ad img').fadeOut(2000);
$('#ad img').fadeOut(2000 , function(){
$('#ad img').attr('src' , 'sm.jpg').fadeIn(2000);
});
</script>
14、ajax之get请求
<body>
用户名: <input type="text" name="username" /><span id="reg"></span>
</body>
<script>
$('input:text').blur(function(){
var url = '30.php?u=' + $(this).val(); //对接收的值做判断，返回0或1
$.get(url , function(res){
if(res == '1') {
$('#reg').html('<font color="red">已被占用</font>');
} else {
$('#reg').html('<font color="green">可以使用</font>');
}
});
});
</script>
15、ajax之post请求
<body>
<h1>jquery 发送POST ajax查询</h1>
<form action="">
<p>用户名:<input type="text" name="u" /></p>
<p>密码:<input type="text" name="p" /></p>
<p><input type="submit" value="提交" /></p>
</form>
</body>
<script>
$('form').submit(function(){
var data = {
'u' : $('input[name="u"]').val(),
'p' : $('input[name="p"]').val()
};
$.post('31.php' , data , function(res){
alert(res);
});
return false;//阻止form提交
});
</script>
16、ajax监听函数
ajax提交时让提交按钮变得不能点并显示“提交中”
ajaxStart()、ajaxSuccess()这几个函数,只能绑定$(document)结点上
<body>
<h1>$.ajax()</h1>
<form action="">
<input type="submit" value="提交" />
</form>
</body>
<script>
$('form').submit(function(){
var param = {
url : '33.php',
type : 'post',
data : {u:'lisi',pass:'11111'},
success:function(res){
alert(res);
}
};
$.ajax(param);
});
$(document).ajaxStart(function(){
$('input:submit').val('提交中').prop('disabled',true);
});
</script>
17、jquery对象的遍历
全选、全不选与反选
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
<body>
<h1>遍历jQuery对象的内部的DOM对象</h1>
<input type="button" value="反选" onclick="quan()" />
<input type="button" value="反选" onclick="bu()" />
<input type="button" value="反选" onclick="fan()" />
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
</body>
<script>
function quan(){
$('input:checkbox').prop('checked',true);
}
function fan(){
$('input:checkbox').prop('checked',false);
}
function fan() {
console.log($('input:checkbox'));
$('input:checkbox').each(function(){
this.checked=!this.checked;
$(this).prop('checked' , !$(this).prop('checked') );
});
}
</script>
18、jquery处理事件的特点
1:和原生事件的语法区别
原生绑定: xxDOMNode.onclick=function(){} , xx.onmousever = function();
原生触发: xxDOMNode.click(), xx.submit(); xx.focus();
jQuery绑定: $(selector).click(function(){});
jQuery触发: $(selector).click();
2:和xx.onclick等的绑定次数的区别
xx.onclick = function(){},是给onclick属性赋值,赋多个值,前面的被覆盖,只有最后一个函数被调用
$(selector).click(函数1);
$(selector).click(函数2);
$(selector).click(函数3); // 会按绑定的顺序,逐个执行
<body>
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="text" value="" />
</body>
<script>
$('input:first').click(function() {
alert('你点击了按钮1,接下来我把焦点切到文本框中');
$('input:last').focus();
});
$('input:last').focus(function(){
$(this).css('border' , '1px solid yellow');
});
// 原生绑定
document.getElementsByTagName('input')[1].onclick = function() {
alert('丁丁');
}
document.getElementsByTagName('input')[1].onclick = function() {
alert('当当');
}
$('input:eq(1)').click(function(){alert('1')});
$('input:eq(1)').click(function(){alert('2')});
$('input:eq(1)').click(function(){alert('3')});
</script>
19、ready事件
dom加载完毕就会执行，而window.onload需要等待整个页面加载完毕
<body>
<h1>onload事件</h1>
<img src="21.php" alt="" />
</body>
<script>
// $(document).ready(function(){alert('DOM已加载完毕,不等图片')});
//等价于ready
$(function(){
alert('DOM已加载完毕');
});
window.onload = function() {
alert('图片终于下载完毕了');
}
</script>
20、一次绑定
只会执行一次
<body>
<input type="button" value="测试" />
</body>
<script>
$('input').one('click' , function(){
alert('1111');
});
</script>
