十、$函数

10.1 jquery对象

• jquery是js库，如果想要使用，要先引入。引入之后，才可以使用里面的各种各样的方法。

• 会向全局暴露一个$()函数，所以我们书写jquery的所有语句都是以$开头。

• jquery有很多方法，我们可以接着打点调用其他方法。

// 获取元素
var p1 = document.getElementsByTagName("p")[0];
// 通过js获取第一个p的内部文本
console.log(p1.innerHTML);

//使用jquery获取元素内部文本
console.log($("p.teshu").html());

10.1.1 JS对象与jQuery对象互相转换

获取内部文本：

js：      p1.innerHTML

jquery：  $("p.teshu").html()

10.1.1.1 Js对象转为jQuery对象

直接使用$()

$(p1).html("今天天气不错");

10.1.1.2 jQuery对象转为Js对象

直接使用[]

$(".teshu")[0].innerHTML = "p元素";

10.2 选择器

jquery非常好用的一点就是选择器，直接使用CSS选择器即可选中元素

10.2.1 支持CSS2.1选择器

<div class="box" id="box">我是一个div</div>
<div class="box1">我是另一个div</div>
<div class="box2">
    <h4>h4</h4>
</div>
<h3>h3</h3>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

// css2.1选择器 类 id 标签 通配符 后代 交集 并集
$(".box").css("color","red");
$("#box").css("backgroundColor","pink");
$("div").css("font-size","40px");
$("*").css("paddingLeft","40px");
$("div.box2 h4").css("color","red");
$("h3,p").css("color","blue");

10.2.2 支持CSS3选择器

// css3选择器 序选择器 小于 大于 偶数 奇数
$("p:first").css("color","red");
$("p:last").css("color","blue");
$("p:eq(3)").css("color","orange");  // :eq(3)表示从0开始数，第3个
$("p").eq(4).css("width","300px");   // .eq()
$("p:lt(2)").css("width","100px");   // :lt(2) 小于 表示选择了0,1
$("p:gt(4)").css("width","100px");   // :lt(4) 大于 表示选择了5,……
$("p:odd").css("backgroundColor","pink");   // :odd 奇数 从0开始数 表示选择了1,3，……
$("p:even").css("backgroundColor","yellow");   // :even 偶数 从0开始数 表示选择了0,2，……

10.3 jquery函数

jquery最初引入的时候向全局暴露的是jquery函数。但是后来人们觉得写起来复杂，才修改为$。

jquery和$使用方式完全一样，jquery仍然保留，还可以继续使用。

// jQuery函数
// 选中所有p元素，并改变颜色
jQuery("p").css("backgroundColor","yellow");