jQuery核心知识点详解-优快云博客

本文链接：https://blog.youkuaiyun.com/xmxt668/article/details/88934656

这篇博客总结了jQuery的主要知识点，包括奇数和偶数行的操作、对象互相转换、文本和属性的处理、样式的操作、元素创建及操作、选择器的使用，以及动画效果。jQuery以其良好的兼容性和简洁的语法在Web开发中广泛使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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

注意
jquery 可以有多个并且不会被覆盖
只需要文档加载成功立即执行入口函数
有很好的兼容性

以上几点用一下函数表示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<script src="jquery-3.0.0.js"></script>

<script>

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

    });*/


    $(function () {
      alert(1)
    })
    $(function () {
        alert(2)
    })
    $(function () {
        alert(3)
    })
</script>
</body>
</html>

一：奇数和偶数行的操作

下面是一个表示奇数和偶数行的进行的操作：

<body>
<ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
    <li>第五行</li>
</ul>
<script src="jquery-3.0.0.js"></script>

<script>

这是js的代码：
  /*  var lis = document.querySelectorAll('ul>li')
    for(var i =0;i<lis.length ;i++){
        //判断奇数还是偶数
        if(i%2==0){ //偶数下标奇数行

           lis[i].style.backgroundColor = 'skyblue'


        }
        else {
            lis[i].style.backgroundColor = 'red'
        }



    }*/

这是jQuery的代码：
    //入口函数
    $(function () {
        //获取元素  $()  选择器作为参数  ---》获取元素
        //隐形迭代  :even偶数下标  :odd 奇数下标
        //链式调用
        $('ul li:even').css('background-color','yellow').text('我是奇数行')
        $('ul li:odd').css({'background-color':'red',width:'300px',height:'100px','border':'1px solid #ccc'})
    });
</script>
</body>
</html>

二：对象互相转换

jQuery 语法是通过选取 HTML 元素，对所选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery

DOM对象：：用javascript方法获取的对象，无法使用jQuery的属性及方法。
jQuery对象：通过jQuery方法返回的对象，无法直接使用DOM对象的属性以及方法。

DOM对象和jQuery对象相互转换

jQuery对象转DOM对象：

$('#box')[0]或$('#box').get(0)    等价于  document.getElementById(‘box’);

简化表示：jquery->js  box --->box[0]

DOM对象转jQuery对象

$(document.getElementById(‘box’));等价于$(‘#box’);
简化表示：js--->jquery 花钱  box ---> $(box)

用下面的函数的来表示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>

<div  class="box"></div>
<script src="jquery-3.0.0.js"></script>
<script

    var box = document.getElementsByClassName('box')[0]//js对象

    /*$(box).css({'width':'200px',height:'200px',backgroundColor:'red'});*/ //设置样式

    var $box = $('.box');//jquery
    $box[0].style.width = '200px';
    $box[0].style.height = '200px'
    $box[0].style.backgroundColor = 'red'
    console.log($box)
</script>
</body>
</html>

三：操作文本

1:纯文本

$对象.text('内容')  获取的方法：  对象.text()   设置的方法：  对象.text('')

2：标签效果的文本

$对象.html('内容')  获取的方法：  对象.html()   设置方法：  对象.html('')   js的方法：  innerHTML

3：表单元素获取值

js 对象.value 

jquery  对象.val() 对象.val('内容')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
        .box {
            width: 30%;
            height: 400px;
            margin: 0 auto;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<input type="text" id="pass">
<script src="jquery-3.0.0.js"></script>
<script>

    $(function () {
        $('.box').html('<em>我是div元素</em>').css({"border-radius":"50%","line-height":"400px","text-align":"center"})

        // onblur  $对象.blur(function(){})  jquery所有事件不加on
        $('#pass').blur(function () {
            //获取用户输入的值
            console.log(this) // bug  js当中事件对象this
            //jquery 中的事件 对象 $(this)
            console.log($(this).val())
        })
    });
</script>
</body>
</html>

四：操作属性

js 1:默认 对象.属性名img.src     a.href 
   2:自定义  setAttribute('属性名','属性值')


jQuery不管自定义还是默认 都叫属性 
获取:  attr('属性名') 
设置 : attr('属性名','属性值')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<div class="box" ></div>
<img src="images/jdTop.jpg" alt="">
<script src="jquery-3.0.0.js"></script>

<script>
    $(function () {

        $('.box').attr('id',200)
        console.log($('.box').attr('id'))

        $('img').attr('src','images/samll.jpg')

    });

</script>
</body>
</html>

五：操作样式

js 样式操作  行内样式  对象.style.属性名
            行外样式  对象.className 
jquery  样式操作 
        行内操作  对象.css({width:'200px',height:'300px',background-color:'red'})
# 如若属性不带引号  驼峰命名 borderRadius
              要是带引号 用css命名法： border-radius

  行外样式    对象.addClass('类名')-  向被选元素添加一个或多个类
             对象.removeClass('类名')-从被选元素中删除一个或多个类
             对象.toggleClass('类名')- 对被选元素进行添加/删除类的切换操作
             对象.hasClass('类名')-判断当前元素是否包含隐藏样式

下面程序是行外样式操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin: 100px auto;
        }
        .cloth {
            border-radius: 50%;
            opacity: 0.6;

        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<button>隐藏</button>
<!--<button>移除</button>
<button>切换</button>-->
<div class="box "></div>
<script src="jquery-3.0.0.js"></script>
<script>
    $(function () {
        //对象:eq(i) i下标获取第i+1个元素
        $('button:eq(0)').click(function () {

            $('.box').toggleClass('hide')
            if($('.box').hasClass('hide')){ //判断当前元素是否包含隐藏样式
                $(this).text('显示')

            }
            else {
                $(this).text('隐藏')
            }


        })
        
       $('button:eq(1)').click(function () {
            $('.box').removeClass('cloth')
        })

        $('button:eq(2)').click(function () {
            $('.box').toggleClass('cloth')
        })
    });

</script>
</body>
</html>

六：创建元素

使用 $ 函数来创建新元素

var  $newElment=$('<div><p></p></div>')//创建元素，返回jQUERY对象

七：元素操作

1:节点的创建 $(’

’)
2)添加和删除元素
添加新的 HTML 内容
通过 jQuery，可以很容易地添加新元素/内容。
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容

$("p").append("Some appended text.");

prepend() - 在被选元素的开头插入内容

$("p").prepend("Some prepended text.");

after() - 在被选元素之后插入内容

$("img").after("Some text after");

before() - 在被选元素之前插入内容

$("img").before("Some text before");

这四个方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<button>创建一个标签</button>
<button>删除元素</button>
<script src="jquery-3.0.0.js"></script>
<script>
    $(function () {

        //1:节点的创建  $('<div></div>')
        var $btn = $('button:first')
        $btn.click(function () {  /*异步*/

            console.log('safdsgf')


    
            var obj = $('<div></div>').html('我是div元素').css({width:'200px',height:'200px',

            backgroundColor:'red',margin:"0 auto"

            }).attr('class','box')
            //尾插内容  父子关系 内部插入
           /* $(document.body).append(obj)*/
           /* obj.appendTo($(document.body))*/
            console.log(obj)
            /*前插  prepend()  prependTo()*/
           /* obj.prependTo($(document.body))*/

            /*外部插入  兄弟关系  after()  before() */
            $btn.after(obj)
        })
        $('button:last').click(function () {

            //empty() 删除父元素内部内容   通通全删除
           /* $(document.body).empty()  不具备挑选功能*/
            $('.box').remove()  //remove()带父元素和内容全部删除
        })
    });
</script>
</body>
</html>

八：选择器

1: * id class tagName
2:层级
  后代   div p 
  子代   div>p 
  毗邻   prev + next  选择 #紧挨# 着prev元素的next 元素  （一组或一个）
        prev ~ sibilings 选择prev元素的所有叫sibilings的#兄弟节点 (一组或多个)
        
3：基本
:first :last  :not 

.eq(i)   :eq(i)
 索引选择器:
$('div').eq(3) //第四个div
$('div:eq(3)') //第四个div


# 对象.children(选择器)

  对象.parent() 找爸爸
  对象.next() 紧挨着的下一个
  对象.prev() 紧挨着的上一个
  对象.find()  找对象中的某一个
  $('div').find('.a')  找的是div里类名为a的孩子
  对象.sibilings()  找所有的兄弟元素

九:动画

1:显示与隐藏 
显示 : show() 无参  display:block 
       
      show(2000,function(){}) //回调  time,callback
隐藏: hide()
     hide(2000,function(){}) //回调  time,callback
     
2.展开收起
	slideDown(speed,callback)向下滑动
	slideUp(speed,callback)向上滑动
	slideToggle(speed,callback)上下切换
$("#flip").click(function(){ $("#panel").slideDown(); });
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

3.淡入淡出
	fadeIn(speed,callback) 淡入
	fadeOut(speed,callback) 淡出
fadeToggle(speed,callback)淡入淡出切换
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

4.停止
stop()停止所有在指定元素上正在运行的动画，停止在当前状态，动画可能未完成。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
$("#stop").click(function(){ $("#panel").stop(); });

5.延迟
delay()设置一个延时来推迟执行队列中之后的项目。
jQuery 1.4新增。用于将队列中的函数延时执行。它既可以推迟动画队列的执行，也可以用于自定义队列。
$('#foo').slideUp(300).delay(800).fadeIn(400);

6.完成
finish()停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。所有动画的CSS属性跳转到他们的最终值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>

        .box {
            width: 300px;
            height: 300px;
            background-color: #55a532;
            position: absolute;
            left: 30px;
            top:40px;
        }
    </style>

</head>
<body>

<div class="box"></div>
<button class="btn">动起来</button>
<button class="btn">不许动</button>
<script src="jquery-3.0.0.js"></script>
<script>
    $(function () {
        $('.btn:first').click(function () {
            $('.box').animate({left:'400px',top:'400px'},2000,'swing',function () {

                console.log('动画完成')

            }).animate({left:'800px',top:'0px'},2000)
        });
        $('.btn:last').click(function () {
            $('.box').stop() //延续  没有清空序列
        });
            });
</script>
</body>
</html>