jQuery基础

1.取值赋值一体

    $('#div1').html('hello');  //赋值

    alert( $('#div1').html() ); //取值

    css('width','200px')//赋值

    css('width')//取值

    //alert( $('li').html() );  //当一组元素的时候，取值是一组中的第一个

    $('li').html('hello');  //当一组元素的时候,赋值是一组中的所有元素

2、属性选择

 [=]         // $('div[style=width:100]').html('hello')  

 [^=]          // $('div[class^=box1]').html('hello'),选择到div具有class并且classname前面几个字母为box1的div

 [$=]        // $('div[class$=box1]').html('hello'),选择到div具有class并且classname后面几个字母为box1的div 

 [*=]         // $('div[style*=red]').html('hello'),选择到div具有style样式中含有red这个字符的div，可以用于标签的任何属性，包括class等，

 引号的问题，当属性值里面有空格的是后需要加上引号，例如具有2个class的。

 

$()下的常用方法

 has()包含//$('div').has('.box').css('background','red');给元素下面有class为box的div元素设置背景颜色

 not() 

not : filter的反义词，除了满足条件之外的其他元素。$('div').not('.box').css('background','red');给除了有class为box的其他的div设置颜色。

filter()

 filter : 过滤，只有符合条件的才能被筛选到。//$('div').filter('.box').css('background','red');给class为box的div设置颜色为红色

next()  nextAll(),全部

下一个兄弟节点。$('div').next().css('background','red');    给div元素的下一个兄弟节点设置背景颜色

prev()  prevAll()，全部

上一个兄弟节点。

siblings() 找到所有的兄弟节点。可以有参数筛选。

find()

// $('div').find('h2').eq(1).css('background','red');找到div下面的h第二个h2标签设置背景颜色。

eq()

//获取元素的下标。 $('div').find('h2').eq(1).css('background','red');找到div下面的h第二个h2标签设置背景颜色。

index()

// $('#h').index() );  //索引就是当前元素在所有兄弟节点中的位置

attr()

操作元素的属性  $('div').attr('title','456')；给div元素加上tile为456

$()下的常用方法 

addClass()

 //$('div').addClass('box2 box4'); //给元素添加class，

removeClass()

// $('div').removeClass('box1');移出元素的class 

toggleClass() 

自动的，若果没有就加上，如果有的话，就删除

width()

  //自身宽度

innerWidth()  

//加上内边距的宽度

outerWidth()

//加上boder的宽度

alert( $('div').width() );  //width

alert( $('div').innerWidth() );  //width + padding

alert( $('div').outerWidth() );  //width + padding + border

alert( $('div').outerWidth(true) );  //width + padding + border + margin

insertBefore()

 //将元素插入到某某元素之前（前面的元插入到后面的元素之前）$('span').insertBefore( $('div') ).css('background','red');将span插入到div之前、

before()

//将后面的元素移动到前面元素之前的那个元素，$('div').before( $('span') ).css('background','red');将span移动的div的前面，div变色。

insertAfter()  after() 

appendTo()

  //添加到，将特定内容插入到每个匹配元素里面的最后面，作为它的最后一个子元素（last child）

append()

//将元素的的最后一个子元素的后面添加内容内容，作为它的最后一个子元素（last child）

prependTo()

  //添加到XX元素子元素前面

prepend()

//添加XX子元素在什么元素的子元素的最前面

remove()

//移出元素

on()  

off()

 

$('div').click(function(){

        alert(123);//123

    });

$('div').on('click',function(){

        alert(123);//123

    });

 $('div').on('click mouseover',function(){

       alert(123);//移过123，点击123

    });

 $('div').on({

        'click' : function(){

            alert(123);//点击123

        },

        'mouseover' : function(){

            alert(456);//移过456

        }

 });

   $('div').on('click mouseover',function(){

       alert(123);//这里的移入弹出事件只会执行一次。因为后面取消了div的鼠标移入事件，而点击事件没有取消，所以点击事件函数能够继续执行

       $('div').off('mouseover');

              });

scrollTop()

//alert( $(window).scrollTop() );  //滚动距离

$()下的常用方法 

ev  //ev : event对象

pageX  //ev.pageX(相对于文档的多了滚动条的距离) : clientX(相对于可视区)

which   ev.which : keyCode,这里指的是字符的键值。包括鼠标的键值也可以用which

                  1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键

preventDefault   ev.preventDefault();  //阻止默认事件

stopPropagation   ev.stopPropagation();  //阻止冒泡的操作     return false;   //阻止默认事件 + 阻止冒泡的操作

one() 

$('div').one('click',function(){  //只执行事件一次

        alert(123);

    });

offset()  //alert( $('#div2').offset().left );  //元素本身（内边距以外）获取到屏幕的左距离

position() //到有定位的父级的left值,把当前元素转化成类似定位的形式（从外边距向外面计算，这里就不包含外边距）

parent() //parent() : 获取父级 只有一层

offsetParent() //offsetParent() : 获取有定位的父级

val() 

alert( $('input').val() );获取元素的value。

    $('input').val(456);改写元素的value值。

size() //alert( $('li').size() );  //4 像length长度

each() 

$('li').each(function(i,elem){   //一参：下标 二参 : 每个元素

        $(elem).html(i);//将每个元素的innerHTML 里面的内容改写为对应的下标。

    });

$()下的常用方法

hover()鼠标移动事件，分为移入和移出事件

show()  展示，包括大小的改变和透明度的改变，参数ms.

hide() 隐藏，包括大小和透明度的改变

fadeIn()   透明度减小到0 在参数时间内

fadeOut() 透明度增加1到在参数时间内不写参数的话默认400

fadeTo() 透明度在参数（第一个参数）时间内改变到参数（第二个参数）

slideDown()   height的渐增

slideUp()   height的渐减

$('#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);1秒之内使透明度增加到1

    });

基础方法扩充 

get()  :就是把JQ转成原生JS  具有下标和length属性 

    /*for(var i=0;i<$('li').get().length;i++){

        $('li').get(i).style.background = 'red';

    }*/

outerWidth()  : 

 //outerWidth()：针对隐藏元素和参数true

//offsetWidth : 是获取不到隐藏元素的值

text()   :  合体的特例 

    alert( $('div').html() );//知识获取所以的HTML内容。

    alert( $('div').text() );  //会获取所有的内容(特例)（包括标签空格等）

remove()  :  

    //detach() : 跟remove方法一样，只不过会保留删除这个元素的操作行为

detach()

$()   :  $(document).ready() 

//DOMContentLoaded

        $(function(){  //等DOM加载完就可以执行了 , 性能要好});

window.onload = function(){};

$(document).ready(function(){});

$()下的常用方法 

parents()   closest() 

//parents() : 获取当前元素的所有祖先节点，参数就是筛选功能

//closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素

//$('#div2').parents('.box').css('background','red');

    $('#div2').closest('.box').css('background','red');

siblings()   

nextAll()  prevAll() 

parentsUntil()   nextUntil()   prevUntil() 

//siblings() : 找所有的兄弟节点，参数也是筛选功能

//nextAll() : 下面所有的兄弟节点，参数也是筛选功能

//prevAll() : 上面所有的兄弟节点

//Until() : 截止

clone() 

//clone() : 可以接收一个参数 ，作用可以复制之前的操作行为（参数为true的时候）

$('div').clone(true).appendTo( $('span') );

wrap()  wrapAll()  wrapInner()  unwrap() 

//wrap() : 包装

//wrapAll() : 整体包装

//wrapInner() : 内部包装

//unwrap() : 删除包装 ( 删除父级 : 不包括body )

//$('span').wrapInner('<div>');

    $('span').unwrap();

add()  slice() 

var elem = $('div');

    var elem2 = elem.add('span');组合元素（并不是添加元素）

    elem.css('color','red');

    elem2.css('background','yellow');

    $('li').slice(1,4).css('background','red');截取元素（并不是删除元素）

serialize()串联成字符串它用于对一个代表一组表单元素的 jQuery 对象进行操作，

• 这个方法不接受任何参数。

//console.log($('form').serialize());  //string : a=1&b=2&c=3

serializeArray() 串联成数组，每一项为一个json.它用于对一个代表一组表单元素的 jQuery 对象进行操作，

• 这个方法不接受任何参数。 方法创建一个对象组成的javascript数组，用来编码成一个JSON一样的字符串。 

console.log( $('form').serializeArray() );

    [

        { name : 'a' , value : '1' },

        { name : 'b' , value : '2' },

        { name : 'c' , value : '3' }

    ]

$()下的常用方法 

animate() 

//第一个参数 : {} 运动的值和属性

//第二个参数 : 时间(运动快慢的)  默认 : 400

//第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) linear(匀速) )

//第四个参数 :  回调函数

$('#div1').click(function(){

        $(this).animate({width : 300 , height : 300} , 4000 , 'linear',function(){

            alert(123);

        });

        $('#div2').animate({width : 300 , height : 300} , 4000 , 'swing');

    });

stop() 

$('#div2').click(function(){

        //$('#div1').stop();   //默认 : 只会阻止当前运动

        //$('#div1').stop(true); //阻止后续的运动

        //$('#div1').stop(true,true); //可以立即停止到指定的目标点

        $('#div1').finish();  //立即停止到所有指定的目标点

    });

delay() 延迟运动。

$(this).animate({width : 300} , 2000).delay(1000).animate({height : 300} , 2000);延迟一秒，运动高度。                        

delegate()事件委托   undelegate()取消事件委托 

$('ul').delegate('li','click',function(){//ul将点击事件委托给li，这里主要是改变this的指向问题。

        this.style.background = 'red';

        $('ul').undelegate();//这里是取消事件委托，所以这里面的代码只会被执行一次

trigger() 主动触发事件

$('#div1').on('click',function(){

        alert(123);

    });

    $('#div1').trigger('click');  //主动触发（这里不需要点击会主动触发点击）

ev.data 事件数据   ev.target事件对象   ev.type事件类型  

$('#div1').on('click',{name:'hello'},function(ev){

        alert(ev.data.name);//hello

        alert( ev.target );//divobject

        alert( ev.type );//click

    });

$下的常用方法 

//$().css()  $().html()  $().val()  : 只能给JQ对象用

//$.xxx()  $.yyy()  $.zzz()  : 不仅可以给JQ用，也可以给原生JS用 : 叫做工具方法

type() 

   //var a = null;

    //$.type() : 也是判断类型

    //alert( typeof a );

    //alert( $.type(a) );

trim() 

去掉字符串起始和结尾的空格。

//$.trim()

//$.leftTrim()去掉左边空格

/*var str = '  hello  ';

alert( '('+$.leftTrim(str)+')' );*/

inArray() 

//inArray() : 类似于 indexOf

//var arr = ['a','b','c','d'];

    //alert(  $.inArray('b',arr)  );

proxy() 

//proxy()  : 改变this指向的

function show(n1,n2){

        alert(n1);

        alert(n2);

        alert(this);

    }

    show(3,4);3，4，window

    $.proxy(show , document,3)(4);3,4，document

    $(document).click( $.proxy(show,window,3,4)  );3,4，window

noConflict()

//$ , jQuery 

//noConflict() : 防止冲突的

var miaov = $.noConflict();下面就可以直接用miaov代替$.

var $ = 10;

miaov(function(){

    miaov('body').css('background','red');

});

parseJSON() 接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 值。

$.parseJSON已经过时（不建议使用）。要将字符串解析成JSON对象，请使用原生的JSON.parse方法来代替。

var str = '{"name":"hello"}';str在这里是字符串

alert($.parseJSON( str ).name);这里将字符串解析为json了。

makeArray()   将类数组转换为数组

var aDiv = document.getElementsByTagName('div');  //类数组

    $.makeArray(aDiv).push();

插件 $ $.extend $.fn $.fn.extend 

//$.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({

aaa : function(){

        alert(2);

    }

});

$.aaa();  // 1

$().aaa();  //2

封装拖拽函数。

$下的常用方法 

ajax() :  json形式的配置参数 url    success error   contentType data     type dataType    cache     timeout 抽象出来的方法 get() post() getJSON() 支持jsonp的形式：指定?callback=? 

理解jquery设计思想 记住大部分jquery API的使用 英文：http://api.jquery.com/ 中文：http://www.css88.com/jqapi-1.7/ tangram.baidu.com/