jQuery基础1

最新推荐文章于 2024-11-10 22:45:39 发布

一字狂~

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量513

点赞数

分类专栏： JQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_53560514/article/details/132017020

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery基础

一，jQuery的初识
- 1.什么是jQuery？
- 2.jQuery入口函数与JavaScript入口函数的区别
二，jQuery的选择器
三，jQuery事件
- 1.事件三要素：事件源，事件类型，事件类型
四，css方法设置或返回被选元素的一个或多个样式属性。
- 1. css（）
五，css类
六.绑定事件
七.jQuery动画

一，jQuery的初识

1.什么是jQuery？

（1）jQuery是一个JavaScript函数库
（2）jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
（3）jQuery库包含以下功能：HTML元素选取、HTML元素操作、CSS操作、HTML
事件函数、JavaScript特效和HTMLDOM遍历和修改

2.jQuery入口函数与JavaScript入口函数的区别

    1、jQuery的入口函数可以有多个，js能只有一个。
    2、js的入口函数要DOM加载完成后执行（图片，css，js），jQuery入口函数只需DOM结构加在完成
    3、jQuery的入口函数可以简写

   console.log(document.getElementById('box'));  // DOM对象

    console.log($(document.getElementById('box')));

    console.log(jQuery('#box'));  // jQuery对象

 // 简写
    $().ready(function () {
        console.log(1);
    })

    $(function () {
        console.log(2);
    })

二，jQuery的选择器

<body>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <p class="box"></p>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li id="list_3">3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li id="li">7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </ul>
</body>

1.基本选择器

（1）ID选择器

   console.log($('#box'));

（2）类选择器

  console.log(jQuery('.box'));

（3）标签选择器

console.log($('div'));

（4）并集选择器

   console.log($('.box,p'));

（5）交集选择器

   console.log($('p.box'));

2.层级选择器

（1）子代选择器

  console.log($('#list>li'));

（2）后代选择器

  console.log($('#list li'));

3.过滤选择器

   // :eq（index）  索引从0开始
    console.log($('li:eq(3)'));

  // :odd() 获取到的li元素中，选择索引号为奇数的元素
    console.log($('li:odd'));
    console.log($('.box:odd'));

// :even  获取到的li元素中，选择索引号为偶数的元素
    console.log($('li:even'));

4.筛选选择器（方法）

    // children(selector) 获取的是子元素  没有参数 获取的是所有的子元素，有参数 获取的是当前的子元素
    console.log($('#list').children());
    console.log($('#list').children('li'));

  // find(selector) 必须加参数 后代选择器
    console.log($('#list').find('li'));

 // siblings(selector)  查找兄弟节点  不包括本身
    console.log($('#list_3').siblings());
    console.log($('#list_3').siblings('ol'));

    // parent()  获取的父元素  parents() 获取的是祖先元素
    console.log($('#list_3').parent());
    console.log($('#list_3').parents());

   // eq(index)   通过索引获取元素
    console.log($('li').eq(2));

 // next()  下一个兄弟
//nextAll() 下边所有兄弟
    console.log($('#list_3').next());
    console.log($('#list_3').nextAll());

//prev（）下一个兄弟
//prevAll() 下边所有兄弟
 console.log($('#list_3').prev());
    console.log($('#list_3').prevAll())

// Index（）获取索引
  console.log($('#list_3').index());

// not（）
console.log($('div').not('#box'));

三，jQuery事件

1.事件三要素：事件源，事件类型，事件类型

四，css方法设置或返回被选元素的一个或多个样式属性。

1. css（）

（1）获取

   // 1、获取
    console.log($('#box').css('width'));
    console.log($('#box').css('height'));
    // 获取颜色  获取的是 rgb()
    console.log($('#box').css('background-color'));
    console.log($('#box').css('color'));

（2）设置

  $('#btn').click(function () {
        console.log('测试');
        // $('#box').css('width', '400px')
        // $('#box').css('height', '400px')
        // $('#box').css('background-color', 'hotpink')
        // $('#box').css('font-size', '30px')
        // 设置多个
        $('#box').css({
            width: '400px',
            'height': '400px',
            backgroundColor: 'hotpink'
        })
    })

五，css类

    <style>
        .box {
            width: 200px;
            height: 200px;
        }

        .box_1 {
            background-color: aquamarine;
        }

        .select {
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button id="add">add</button>
    <button id="remove">remove</button>
    <button id="toggle">toggle</button>
</body>

1.addClass() 添加类名

 $('#add').click(function () {
      $('.box').addClass('box_1 box_2')
    })

2.removeClass() 删除类名

  $('#remove').click(function () {
        $('.box').removeClass('box_1 box_2 box')
    })

3.toggleClass()切换类名

   $("#toggle").click(function () {
        // $('.box').toggleClass('box')
        $('body').toggleClass('select')
    })

六.绑定事件

<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

    console.log($('#list>li'));
    $('#list>li').click(function () {
        console.log($(this));
    })

七.jQuery动画

  <style>
        #box {
            width: 400px;
            height: 400px;
            background-color: blueviolet;
        }

        #small {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button id="hide">hide</button>
    <button id="show">show</button>
    <button id="toggle">toggle</button>
    <button id="fadeIn">fadeIn</button>
    <button id="fadeOut">fadeOut</button>
    <button id="fadeToggle">fadeToggle</button>
    <button id="slideDown">slideDown</button>
    <button id="slideUp">slideUp</button>
    <button id="slideToggle">slideToggle</button>
    <button id="animate">animate</button>
    <button id="stop">stop</button>
    <div id="box"></div>
    <div id="small">
        smallsmallsmall
    </div>
</body>

1. 可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。

  // 可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
    $("#hide").click(function () {
        $("#box").hide(1000)
    })
    $("#show").click(function () {
        $("#box").show(1000)
    })

2. 可以使用 toggle() 方法来切换 hide() 和 show() 方法

  // 可以使用 toggle() 方法来切换 hide() 和 show() 方法
    $("#toggle").click(function () {
        $("#box").toggle()
    })

3. fadeIn() 用于淡入已隐藏的元素， fadeOut() 方法用于淡出可见元素。

  // fadeIn() 用于淡入已隐藏的元素， fadeOut() 方法用于淡出可见元素。
    $("#fadeIn").click(function () {
        $("#box").fadeIn(1000)
    })
    $("#fadeOut").click(function () {
        $("#box").fadeOut(2000)
    })

4.fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

  $("#fadeToggle").click(function () {
        $("#box").fadeToggle(2000)
    })

5. slideDown() 方法用于向下滑动元素， slideUp() 方法用于向上滑动元素。

   $("#slideDown").click(function () {
        $("#box").slideDown(1000, function () {
            $("#box").slideUp()
        })
    })
    $("#slideUp").click(function () {
        $("#box").slideUp(2000)
    })

6. slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

    $("#slideToggle").click(function () {
        $("#box").slideToggle(2000)
    })

7.animate() 方法用于创建自定义动画。不可以设置颜色，必须用到插件

  $("#animate").click(function () {
        $("#small").animate({
            left: '100px',
            width: '200px',
            fontSize: '30px',
            //backgroundColor: 'green',
            //color: 'green'
        }, 2000,)

8.jQuery stop() 方法用于停止动画或效果

 $("#stop").click(function () {
        $("#small").stop()
    })

9.在当前动画 100% 完成之后执行。回调函数

  $("#animate").click(function () {
        $("#small").animate({
            left: '100px',
            width: '200px',
            fontSize: '30px',
            backgroundColor: 'green',
            color: 'green'
        }, 2000, function () {
            console.log('完成了');
        })
    })