JQuery

内容操作

获取/更改内容

　　.html()  //获取:匹配的第一个元素的内部所有的HTML

　　　　　　//更改:匹配所有元素设置相同的内容.html(function(){return ‘<em>‘+$(this).text()+‘</em>‘});

　　.text()  //获取每个元素的文本,包括后代元素文本

　　.replaceWith() //把匹配元素中每个元素中的文本替换为新内容,并返回被替换的元素

　　.remove()  //移除匹配的元素

元素

　　插入元素分两步:

　　1.将新元素创建为JQuery对象

　　　　var $newFragment = $(‘<li>‘);

　　　　var $newItem=$(‘<li class="hot" >newItem</li>‘);

　　2.向页面中添加新元素

　　.before()

　　.after()

　　.prepend()

　　.append()

_.before()<a>_.prepend()JQuery_.append()</a>_.after()　　　　　　　

　　.clone()

　　.unwrap()

　　.detach()

　　.empty()

　　.add()

属性

　　.attr()  //读取:$(‘li#one‘).attr(‘id‘);

　　　　　 //设置:$(‘li#one‘).attr(‘id‘ ‘hot‘);

　　.removeAttr() 

　　　　//Class属性值中可以包含多个Class,以空格隔开,addClass removeClass都是添加/删除单独的Class值,不影响其他的class值

　　.addClass()  //用于向Class属性已有的值中添加新Class,不会覆盖已有的值$(‘li.hot‘).addClass(‘Love‘);

　　　　　　　　//Class属性值中可以包含多个Class,以空格隔开

　　.removeClass()

　　.css()   注意:最好是修改class属性的值而不是在js中直接修改css属性

　　//获取css  $().css(‘background-color‘);

　　//设置css $(‘li‘).css(‘padding-left‘,‘+=20‘);

　　　　　　　$(‘li‘).css({

　　　　　　　　　　　　‘background-color‘:‘red‘,

　　　　　　　　　　　　‘font-family‘:‘Courier‘

　　　　　　　　　　　　});

表单值

　　.val()

　　.isNumber()

查找元素

一般方法

　　.find()

　　.closest()

　　.parent()

　　.parents()

　　.children()

　　.siblings()

　　.next()

　　.nextAll()

　　.prev()

　　.prevAll()

筛选器/测试

　　.filter()

　　.not()

　　.has()

　　.is()

　　:contains()

 特效和动画 　　向页面的部分内容添加特效和动画

　　BASIC

　　.show()  //显示选中的元素

　　.hide()  //隐藏

　　.toggle()  //在选中元素上切换显示和隐藏的状态

　　FADING

　　.fadeIn()  //淡入选中元素使其变得不透明

　　.fadeOut() //淡出选中元素使其变得透明

　　.fadeToggle()

　　SLIDING　　

　　.slideDown()  //使用滑动特效来显示选中的元素

　　.slideUp()　　//使用滑动特效来隐藏选中的元素

　　.slideToggle

　　CUSTOM

　　.delay()

　　.stop()

　　.animate()  //创建自定义动画

尺寸/位置                                获取更新元素盒模型的尺寸或者位置

　　尺寸

　　.height()

　　.width()

　　.innerHeight()

　　.innerWidth()

　　.outerHeight()

　　.outerWidth()

　　位置

　　.offset()

　　.position()

　　.scrollLeft()

　　.scrollTop()

 事件

　　.ready()　//DOM树形成后触发(与此同时,图片 CSS JavaScript可能还在加载中)

　　　　　　　//通过判断浏览器是否支持DOMContentLoaded ^{ie9 Chrome 0.2 FireFox1 Safari3.1 Opera9}

　　　　　　　　　$(document).ready(function(){

　　　　　　　　　　//code for page prepared

　　　　　　　　　　});

　　　　　　　　缩写:  $(function(){ //code

　　　　　　　　　　　　});

　　.load()   

　　.on() 事件方法

　　$(‘li‘).on(‘click‘,function(){    //选取所有的<li>元素 on()二个参数1.需要响应的事件  2.发生该事件时需要运行的代码

　　　　　　　　$(this).addClass(‘complete‘);　　　　　　　　

//  });

　　.on( events [,selector] [, data] , function(e){} );

$(function(){
    var listItem,itemStatus,eventType;
    $(‘ul‘).on(‘click mouseover‘,‘:not(#hot)‘,{status:‘important‘},function(e){
        listItem=e.target.textContent;
        itemStatus=e.data.status;
        eventType=e.type;
        $(‘#note‘).html(listItem+itemStatus+eventType);
    });


});    

操作选取结果中的每一个元素

　　获取匹配结果中的每一个元素的信息

　　在每一个元素上执行一系列的操作

  .each()

　　$(‘li‘).each(function(){

　　　　var ids=this.id;  //也可以使用ids=$(this).attr(‘id‘);,但会创建jquery对象,效率没传统js更高

　　　　$(this).append(‘<em>‘+ids+‘</em>‘);

　　});