jQuery的一些实用的方法
2017-12-07 00:00
411 查看
什么是jQuery
一个快速，小巧，功能丰富的JS类库;大型开发最常用的类库之一;对原生js中诸如HTML文档遍历和操纵，事件处理，动画和Ajax等操作进行了一次简化封装;多功能，可扩展，跨浏览器兼容JQ的好处？
简化JS的复杂操作不再需要关心兼容性
提供大量实用方法
如何学习JQ？
www.jquery.comJQ只是辅助工具，要正确面对
需要分阶段学习
JQ设计思想？
选择网页元素模拟CSS选择元素 $('div')->$('#box')->$('.box')
独有表达式选择 $('li:eq(3)')->$('li:even')下标、属性、奇偶等
多种筛选方法 $('li').filter('.box')->$('li').not('.box')
JQ写法
方法函数化
window.onload = function(){}
$(function(){});
function $(){}
innerHTML = 123;
html(123);
function html(){}
onclick = function(){}
click(function(){});
function click(){}链式操作
$('li').click(function(){
$(this).addClass('active').siblings().removeClass('active')
})取值赋值合体
$('#ipt').val(14); //赋值
console.log($('#ipt').val()); //取值
$('#div1').html('hello'); //赋值
console.log( $('#div1').html() ); //取值
css('width','200px') //赋值
css('width')//取值JQ与JS关系
可以共存，不能混用
$(this).html(); //jq的写法 this.innerHTML; //js的写法 $(this).innerHTML; //错误的 this.html(); //错误的
$()下的常用方法
has() 包涵not() 与filter操作效果相反
filter() 过滤
next() 下一个兄弟元素
prev() 上一个兄弟元素
find() 后代所有元素
eq() 根据索引选取相应的元素
index() 索引：就是当前元素在所有兄弟节点中的位置
attr() 属性的相关操作 $('.box').attr('id','container')
siblings() 除自身为外的其他所有兄弟元素
选项卡demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
<style>
#div1 div{ width:200px; height:200px; border:1px red solid; display:none;}
.active{ background:red;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
/*window.onload = function(){
var oDiv = document.getElementById('div1');
var aInput = oDiv.getElementsByTagName('input');
var aCon = oDiv.getElementsByTagName('div');
for(var i=0;i<aInput.length;i++){
aInput[i].index = i;
aInput[i].onclick = function(){
for(var i=0;i<aInput.length;i++){
aInput[i].className = '';
aCon[i].style.display = 'none';
}
this.className = 'active';
aCon[this.index].style.display = 'block';
};
}
};*/
$(function(){
$('input').click(function(){
$('#div1').find('div').css('display','none');
$(this).attr('class','active').siblings().attr('class','');
$('#div1').find('div').eq( $(this).index() ).css('display','block');
// $('#div1>div').eq( $(this).index() ).css('display','block')
});
});
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display:block">111111</div>
<div>222222</div>
<div>333333</div>
</div>
</body>
</html>addClass() removeClass() 添加(会自动过滤重复的类名)移除class
$('div').addClass('box2 box4');
$('div').removeClass('box1');width() innerWidth() outerWidth()
alert( $('div').width() ); //width
alert( $('div').innerWidth() ); //width + padding
alert( $('div').outerWidth() ); //width + padding + border
alert( $('div').outerWidth(true) ); //width + padding + border + margininsertBefore() before()
insertAfter() after()
appendTo() append()
prependTo() prepend()
DOM节点的操作（自己尝试一下）
//定义一个div标签，一个span标签
//$('span').insertBefore( $('div') ); //把span插入到div的前面
//$('div').before( $('span') ) //div在span的前面
//$('div').insertAfter( $('span') );
//$('span').after( $('div') );
//$('div').appendTo( $('span') );
//$('div').prependTo( $('span') );
//区别 ：后续操作变了
//$('span').insertBefore( $('div') ).css('background','red'); //css的操作对象是span
$('div').before( $('span') ).css('background','red'); //css的操作对象是divremove() 删除DOM节点
on() off() 添加/关闭监听事件
scrollTop() 滚动条距离顶部滚动多少
编写弹窗
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#login{ width:300px; height:300px; border:1px #000 solid; position:absolute;}
#close{ position:absolute; right:0; top:0;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
//var oDiv = $('<div>div</div>');
//$('body').append( oDiv );
$('#input1').click(function(){
var oLogin = $('<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>');
$('body').append( oLogin );
oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 );
$('#close').click(function(){
oLogin.remove();
});
$(window).on('resize scroll',function(){
oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() );
});
});
});
</script>
</head>
<body style="height:2000px;">
<input type="button" value="点击" id="input1" />
<!--<div id="login">
<p>用户名:<input type="text" /></p>
<p>密码:<input type="text" /></p>
<div id="close">X</div>
</div>-->
</body>
</html>ev pageX which
preventDefault
stopPropagation
one()
$('div').click(function(ev){
//ev : event对象
ev.pageX(鼠标相对于文档的) : clientX(相对于可视区)
ev.pageY(鼠标相对于文档的) : clientY(相对于可视区)
ev.which : keyCode 按键
ev.preventDefault(); //阻止默认事件
ev.stopPropagation(); //阻止冒泡的操作
return false; //阻止默认事件 + 阻止冒泡的操作
});
$('div').one('click',function(){ //只执行事件一次
alert(123);
});offset() position()
$('#div2').offset().left; //获取到屏幕的左距离
$('#div2').position().left; //到有定位的父级的left值,把当前元素转化成类似定位的形式offsetParent()
//parent() : 获取父级
//offsetParent() : 获取有定位的父级
//$('#div2').parent().css('background','blue');
$('#div2').offsetParent().css('background','blue');val() 表单取值
size() 类似于length
each() 遍历可穿两个参数
//alert( $('input').val() );
//$('input').val(456);
//alert( $('li').size() ); //4 像length
$('li').each(function(i,elem){ //一参：下标 二参 : 每个元素
$(elem).html(i);
});拖拽编写
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>无标题文档</title>
<style>
div{ width:100px; height:100px; background:red; position:absolute;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
var disX = 0;
var disY = 0;
$('div').mousedown(function(ev){
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){
$('div').css('left',ev.pageX - disX);
$('div').css('top',ev.pageY - disY);
});
$(document).mouseup(function(){
$(document).off();
});
return false;
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>hover() 类似css中的hover
show() hide() 隐藏显示带动画
fadeIn() fadeOut() fadeTo() 淡入淡出
slideDown() slideUp() 滑动
$('#div1').hover(function(){
//$(this).css('background','blue');
//$('#div2').hide(3000);
//$('#div2').fadeOut(1000); //默认400
//$('#div2').slideUp();
$('#div2').fadeTo(1000,0.5);
},function(){
//$(this).css('background','red');
//$('#div2').show(3000);
//$('#div2').fadeIn(1000);
//$('#div2').slideDown();
$('#div2').fadeTo(1000,1);
});ps:参考妙味课堂学习资料整理
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery的一些实用方法
- jquery easyui combox一些实用的小方法
- jquery easyui combox一些实用的小方法
- jquery easyui combox一些实用的小方法
- jquery实用的一些方法
- jQuery常用的一些方法
- 自己找到的一些比较实用比较好看的前端特效。很多是前面提供的jquery网站的
- 总结的一些jquery获取更改dom元素常用方法
- jquery 刷新页面方法和一些javascript基础函数
- Jquery一些常用的方法
- jQuery一些常用特效方法使用实例
- JS一些实用的方法
- 一些实用的 jQuery 技巧
- underscore.js 源码中一些实用的工具方法
- jQuery 一些方法技巧
- jquery 刷新页面方法和一些javascript基础函数
- jquery 的一些使用方法
- 原生JS取代一些JQuery方法
- Ashx中使用jQuery.Ajax方法的一些记录
- Jquery 的一些方法