妙味Jquery中级
浏览数：68 /
时间：2015年06月09日
//get() : 就是把JQ转成原生JS
//document.getElementById(‘div1‘).innerHTML
//alert( $(‘#div1‘).get(0).innerHTML ); // innerHTML是js里的Jquery里的是html() 但是这里用了get方法就转成JS的了
for(var i=0;i<$(‘li‘).length;i++){
$(‘li‘).get(i).style.background = ‘red‘;
//$(‘li‘)[i].style.background = ‘red‘;
}
//outerWidth() 与原生的区别
//offsetWidth : 是获取不到隐藏元素的值
$(function(){
//alert( $(‘#div1‘).get(0).offsetWidth );
alert( $(‘#div1‘).outerWidth() );
});
text()
$(function(){
//alert( $(‘div‘).html() ); //获取第一个div的内容
//alert( $(‘div‘).text() ); //会获取所有的内容(特例) 不包含标签
$(‘div‘).text(‘<h3>h3</h3>‘);
});
//detach() : 跟remove方法一样，只不过会保留删除这个元素的操作行为
$(function(){
$(‘div‘).click(function(){
alert(123);
});
var oDiv = $(‘div‘).detach(); //remove会把原来的事件搞没，如果用detach原来的事件还会有
$(‘body‘).append( oDiv );
});
$()
$(function(){ //等DOM加载完就可以执行了 , 性能要好。不会等图片什么的加载完
});
window.onload = function(){}; //html加载完
//DOMContentLoaded
$(document).ready(function(){
//这个跟上面第一个一样的
});
//parents() : 获取当前元素的所有祖先节点，参数就是筛选功能
//closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素
$(function(){
//$(‘#div2‘).parents(‘.box‘).css(‘background‘,‘red‘);
$(‘#div2‘).closest(‘.box‘).css(‘background‘,‘red‘);
});
//siblings() : 找所有的兄弟节点，参数也是筛选功能 siblings(‘em‘)
//nextAll() : 下面所有的兄弟节点，参数也是筛选功能
//prevAll() : 上面所有的兄弟节点
//Until() : 截止
$(function(){
$(‘span‘).nextUntil(‘h2‘).css(‘background‘,‘red‘);
});
clone()
//$(‘div‘).appendTo( $(‘span‘) );
//$(‘span‘).get(0).appendChild( $(‘div‘).get(0) );
//clone() : 可以接收一个参数 ，作用可以复制之前的操作行为
$(‘div‘).click(function(){
alert(123);
});
$(‘div‘).clone(true).appendTo( $(‘span‘) ); //把找到的div clone一份放到span里，而不是剪切过来。如果设置为true，那么点击事件也会有
//wrap() : 包装 $(‘span‘).wrap(‘<div>‘) 给每个span外面包一层div标签
//wrapAll() : 整体包装 所有span外面放一个div
//wrapInner() : 内部包装 把span的子节点用div包上
//unwrap() : 删除包装 ( 删除父级 : 不包括body )
$(function(){
//$(‘span‘).wrapInner(‘<div>‘);
$(‘span‘).unwrap();
});
add()
$(function(){
/*var elem = $(‘div‘);
var elem2 = elem.add(‘span‘); //elem2 里面既有div又有span了
elem.css(‘color‘,‘red‘);
elem2.css(‘background‘,‘yellow‘);*/ 所以一下都变色了
slice()
$(‘li‘).slice(1,4).css(‘background‘,‘red‘); //拿到1：其实位置，4：结束位置
});
//console.log($(‘form‘).serialize()); //string : a=1&b=2&c=3
console.log( $(‘form‘).serializeArray() ); 转化成数组了
[
{ name : ‘a‘ , value : ‘1‘ },
{ name : ‘b‘ , value : ‘2‘ },
{ name : ‘c‘ , value : ‘3‘ }
]
Jquery中的动画
//animate() :
//第一个参数 : {} 运动的值和属性
//第二个参数 : 时间(运动快慢的) 默认 : 400
//第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) linear(匀速) )
//第四个参数 : 回调函数
$(function(){
$(‘#div1‘).click(function(){
$(this).animate({width : 300 , height : 300} , 4000 , ‘linear‘,function(){
alert(123);
});
$(‘#div2‘).animate({width : 300 , height : 300} , 4000 , ‘swing‘);
});
});
先走宽再走高
/*$(this).animate({width : 300} , 2000 , ‘linear‘,function(){
$(this).animate({height : 300});
});*/
$(this).animate({width : 300} , 2000).delay(1000).animate({height : 300} , 2000); //中间停顿1秒钟
$(‘#div2‘).click(function(){
//$(‘#div1‘).stop(); //默认 : 只会阻止当前运动
//$(‘#div1‘).stop(true); //阻止后续的运动
//$(‘#div1‘).stop(true,true); //可以立即停止到指定的目标点 （直接把当前运动结束，这里是先变完宽）
$(‘#div1‘).finish(); //立即停止到所有指定的目标点
});
事件委托
$(‘ul‘).delegate(‘li‘,‘click‘,function(){
this.style.background = ‘red‘;
$(‘ul‘).undelegate();
});
主动触发 trigger()
/*$(‘#div1‘).on(‘click‘,function(){
alert(123);
});
$(‘#div1‘).trigger(‘click‘); //主动触发*/
$(‘#div1‘).on(‘show‘,function(){ //show 自定义show事件
alert(123);
});
$(‘#div1‘).trigger(‘show‘);
事件细节
$(‘#div1‘).on(‘click‘,{name:‘hello‘},function(ev){
//alert(ev.data.name); ev.data传的数据
//alert( ev.target ); //事件源
alert( ev.type ); //什么类型的事件
});
//$().css() $().html() $().val() : 只能给JQ对象用
//$.xxx() $.yyy() $.zzz() : 不仅可以给JQ用，也可以给原生JS用 : 叫做工具方法
$(function(){
//var a = null;
//$.type() : 也是判断类型
//alert( typeof a );
//alert( $.type(a) );
var str = ‘ hello ‘;
alert(‘(‘+$.trim(str)+‘)‘);
});
//inArray() : 类似于 indexOf
//var arr = [‘a‘,‘b‘,‘c‘,‘d‘];
//alert( $.inArray(‘b‘,arr) );
//proxy() : 改变this指向的
function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
//show();
//$.proxy(show , document, 3， 4)(); // 也可以这样写
//$.proxy(show , document,3)(4);
//noConflict() : 防止冲突的
/*var miaov = $.noConflict(); //miaov 替换$的功能了
var $ = 10;
miaov(function(){
miaov(‘body‘).css(‘background‘,‘red‘);
});*/
//var str = ‘{"name":"hello"}‘;
//alert($.parseJSON( str ).name);
var aDiv = document.getElementsByTagName(‘div‘); //aDiv不是数组 是类数组
$.makeArray(aDiv).push();
ajax
/*$.ajax({
url : ‘xxx.php‘,
data : ‘name=hello&age=20‘,
type : ‘POST‘,
success : function(data){
alert(1);
},
error : function(){
alert(2);
}
});*/
$.get(‘xxx.php‘,function(){
});
$.post(‘xxx.php‘,function(){
});
$.getJSON(‘xxx.php?callback=?‘,function(data){
data
});
随机({});
Jquery插件
//$.extend : 扩展工具方法下的插件形式 $.xxx() $.yyy()
//$.fn.extend : 扩展到JQ对象下的插件形式 $().xxx() $().yyy()
$.extend({
leftTrim : function(str){
return str.replace(/^\s+/,‘‘);
},
rightTrim : function(){},
aaa : function(){
alert(1);
},
bbb : function(){}
});
$.fn.extend({
drag : function(){
//this : $(‘#div1‘)
var disX = 0;
var disY = 0;
var This = this;
this.mousedown(function(ev){
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){
This.css(‘left‘ , ev.pageX - disX);
This.css(‘top‘ , ev.pageY - disY);
});
$(document).mouseup(function(){
$(this).off();
});
return false;
});
},
aaa : function(){
alert(2);
}
});
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
