jQuery学习day1

来源：互联网发布：mac itunes 12 铃声编辑：程序博客网时间：2024/06/18 08:36

1.jquery

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

    
    <scriptsrc="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>
<inputtype="button"value="展示"id="btn1">
    <inputtype="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