jQuery初识之设计思想方法函数示例

$('div'):eq(2)  //表示该组div中第三个div
$('div'):odd()   //表示该组中为偶数的div
$('div'):even()  //表示改组中为奇数的div 

$('li').filter('.box').css('background','red') ;
//选出多组li中css名为.box的那个li,将它的背景颜色设为红色
$('li').filter('[title = hello]').css('background','red');
//选出多个li中title为hello的li，并将它的背景颜色设为红色

window.onload = function(){};  //js写法
$(function(){});  //JQ写法
function $(){}  //假装有一个$函数

innerhtml = 123;  //对于innerHTML同样理解
html(123)
function html(){}

onclick = function(){};  //对于onclick函数同样
click(function(){})
function click(){}

window.onload = function(){    //js代码
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function(){
        alert( this.innerHTML );
    };
};

$(function(){    //JQ代码
    //var oDiv = $('#div1');
    $('#div1').click(function(){   
       //此处若没有注释上一句，则可以写成oDiv.click(function(){
        alert( $(this).html() );
    });
});

$('#div1').click(function(){
        alert( $(this).html() );  //jq的写法
        alert( this.innerHTML );  //js的写法
        alert( $(this).innerHTML );  //错误的
        alert( this.html() );  //错误的
    });

var oDiv = $('#div1');
    oDiv.html('hello');
    oDiv.css('background','red');
    oDiv.click(function(){
        alert(123);
    });

$('#div1').html('hello').css('background','red').click(function(){
        alert(123);
    });

oDiv.innerHTML = 'hello';  //赋值
alert( oDiv.innerHTML );  //取值

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

alert($('div').attr('title'));  //获取title属性
//设置属性  
$('div').attr('title','456');
$('div').attr('class','box');