jQuery基础day1

1.jQuery与DOM区别

什么是DOM对象？:通过js对象获取到的对象
什么是jQuery对象？:通过jQuery对象获取到的对象
区别：只能自己调用自己对应的方法
联系：jQuery是有好多js对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src = "jquery-1.12.4.js"></script>
<ul>
    <li id="yi">星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
</ul>
<script>

    $(function () {
        $("li")[0].style.backgroundColor = "pink";
    });
    $(function () {
        $("li").get(1).style.backgroundColor = "pink";
    });
    // $(function () {
    //     $("li").eq(2).style.backgroundColor = "pink";  这是错的
    // });
    //正确写法
     $(function () {
         $("li").eq(2).css("backgroundColor","pink");
     });

   // DOM转换为jQuery   ----------直接$获取就行了
    var obj = document.getElementById("yi");
    $(obj).text("星期天");

2.jQuery的入口函数

$实质就是一个函数
 $(function () {   //入口函数 参数是一个匿名函数
 });
 $(document).ready(function () { //入口函数 参数是一个js对象
 });
 $("li");$(#li);$(.li);        //入口函数 ，参数是字符串

3.jQuery的特点

存在隐式迭代

对于js优先执行

存在链式操作

多个事件不会覆盖

相当于伪数组（可以利用索引来转化为DOM）

4.基本选择器

$(function () {
    // 类选择器
    $(".red").css("backgroundColor","red");
    //id选择器
    $("#yi").css("backgroundColor","pink");
    //标签选择器
    $("li").css("fontSize","32px");
    //并集选择器
    $("#yi,.red").css("fontSize","12px");
    //交集选择器
    $("#yi.red").css("fontSize","32px");
})

5.eq()与get()的区别

eq()有两种写法：1.过滤选择器$("选择器:eq(n)") , 2.jQuery对象.eq(n) ------------都是用来获取第n元素但是返回的是jQuery对象

get()用法： $("选择器").get(n).backgoundColor = "pink" -------------返回的是一个DOM，所以可以当做js对象使用

两种设置背景颜色代码就有所差别：即

$(""div).get(n).backgoundColor = "pink"

$(""div).eq(n).css("backgoundColor","pink" )

6.需要注意的问题

$==jQuery

jq不会帮错，一般都是没找到对象，查错可以利用弹窗，或者对象打断点调试，看对象里面的元素是否为0

猜你喜欢