妙味Jquery中级

//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);
 }
 
});

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。