$("#div").css(‘background‘,‘red‘);//根据ID选择元素

$("div").css(‘background‘,‘red‘);//根据标签选择元素

$(".div").css(‘background‘,‘red‘);//根据class选择元素

-独有的表达式选择

选择一组:

$("li").css("background","red");

选择这组中的第一个

$("li:first").css("background","red");

选择这组中的最后一个

$("li:last").css("background","red");

那么问题来了？要选择中间那个要咋样选择呢？这时候需要使用eq()   eq类似于下标，从0开始

$("li:eq(2)").css("background","red");

选择奇数行

$("li:even").css("background","red");

选择偶数行

$("li:odd").css("background","red");

-多种筛选方法

选择class为box的li

$("li").filter(‘.box‘).css("background","red");

筛选li  title 为hello的让其颜色变红

$("li").filter(‘[title=hello]‘).css("background","red");

JQ写法

-方法函数化

JQ中的所有方法都函数化了

方法函数化:

JS:

window.οnlοad=function(){};

JQ写法

$();  实际上为函数名为$ 的函数调用

function  $(){}

JS:innerHTML=123;

JQ :html(123) ----->function(){}

实例

原生JS写法

window.οnlοad=function(){

var ODiv=document.getElementById("div1");

ODiv.οnclick=function(){

alert(this.innerHTML);

}

}

JQ写法:

$(function(){　$("#div1").click(function(){alert($(this).html());})});

注意:使用JQ大多为方法调用,所以一般调用都要加括号

-链式操作

$("#div1").html(‘hello‘).css("background","red").click(function(){alert("1234")});

-取值赋值合体

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

$("#div1").html();　　//取值

css("width","200px");//设置

css("width"); //获取

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

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

• aaa
• bbb
• ccc
• ddd

attr 操作属性的用法:

$("div").attr("title");　　　　一个参数代表获取

$(div).attr("title","456");　　设置属性

$(div).attr("class","box");　　设置属性

JQ与JS的关系

-可以共存，不能混用

$(this).html(); //JQ写法

this.innerHTML;//js的写法

$(this).innerHTML  //错误的

this.html(); 　　 //错误的

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！