jQuery学习day1

1.jquery

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 200px;
            margin-bottom: 10px;
            background-color: #a43035;
            display: none;
        }
    </style>

    <!--1.需要引入jQuery文件-->
    
<script src="jquery-3.2.1.js"></script>
    <script>
    //2.入口函数
    
$(document).ready(function(){
    //注册事件
    
$("#btn1").click(function(){
    $("div").show(1000);
    });
    $("#btn2").click(function () {
        $("div").text("我是内容");

    });
    });
</script>

</head>
<body>
<input type="button" value="展示" id="btn1">
    <input type="button" value="设置内容" id="btn2">
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

2. juery的版本

1. x兼容ie5678浏览器(推荐)

2. x不兼容ie5678浏览器

3. x不兼容ie5678浏览器,而且更加精简(国内主要用于兼容IE678

分开发版本和生产版本

 

3.juery的入口函数。

1)使用jquery的三个步骤

1. 引入jquery文件

2. 入口函数

3. 功能实现

 

(2)关于jquery的入口函数

//第一种写法

$(document).ready(function()){

 

});

//第二种写法

$(function(){

 

});

 

注:jquery入口函数与js入口函数对比

1. js要等待所有资源(包括图片、文件)加载完才加载。

2. Jquery只要等到文档树加载完成就开始执行了,并不会等待图片的加载(快!)

 

4. jquery对象与DOM对象的区别(重点):

1. DOM对象:使用javascript中的方法获取页面中的元素返回的对象就是dom对象。

2. Jquery对象:jquery对象就是使用Jquery的方法获取页面中的元素返回的对象就是Jquery对象。

3. Jquery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))

4. DOM对象与juery对象的方法不能混用。

 

DOM对象转换成jquery对象。打个比方就像机洗衣服。

Var $obj=$(domObj);

//$(document).ready(function(){});//就是典型的DOM对象转jQuery对象

 

jquery对象转换成DOM对象

//第一种方法(推荐)

Var $li=$(“li”);

//第二种方法

$li.get(0)

 

二.选择器

1. 什么是jQuery选择器?

    jQuery选择器是Jquery为我们提供的一组方法,让我们能够更加方便的获取到页面中的元素

2. 基本选择器

ID选择器      $(“#id”);       用于获取指定id的元素

类选择器      $(“class”);

标签选择器    $(“div”);

并集选择器    $(“div,p,li”);     用逗号隔开的标签

交集选择器    $(“div.redClass”);

 

3. 层级选择器

子代(儿子)选择器   $(“ul>li”)   使用>号,获取次一级元素

后代选择器           $(“ul li”)    用空格隔开  获取所有ul下的所有元素。

 

4. 过滤选择器

eq(index)     $(“li.eq(2)”).css(“color”,”red”)  获取(索引号)下标等于index的元素,索引号从0开始

lt(index)                                                       获取(索引号)下标小于index的元素    

:gt(index)                                                         获取(索引号)下标 大于index的元素   

odd                                                              选择下标为奇数

even                                                            选择下标为偶数

                    

5. 筛选选择器(方法)

    与过滤选择器相似,但用法不同,主要体现方法。

Children(selector)  $(“ul”).children(“li”)     相当于子代选择器。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值