前端小记——jQuery

Jmh-Ethereal

于 2023-05-03 18:06:08 发布

阅读量1.2k

点赞数

文章标签：前端 jquery javascript

本文链接：https://blog.csdn.net/m0_63138660/article/details/130458066

版权

这篇文章介绍了jQuery的基本概念，包括其轻量级特性和加载模式。详细讲解了jQuery的选择器如id、class和标签选择器，以及元素操作如插入文本、获取输入框值和设置属性。此外，还阐述了CSS样式操作、class的添加与切换、节点操作和事件绑定，包括简写方式、事件对象和各种动画效果如淡入淡出、上卷下拉等。

摘要由CSDN通过智能技术生成

jQuery简介

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

使用之前需要先安装jQuery库文件

jQuery语法

$(selector).action()

jQuery加载模式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入JQuery库文件-->
    <script src="js/jquery.js"></script>
    <script>
     /* window.onload = function() {
        $('div').css('width','200px').css('height','200px').css('background','red');
      }*/
     //ready()等文档准备完成之后调用。
    /*  $(document).ready(function (){
        $('div').css('width','200px').css('height','200px').css('background','red');
      })*/
     //简写方式
     $(function (){
       $('div').css('width','200px').css('height','200px').css('background','red');
     })
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

原生DOM对象和jQuery对象互换

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--引入JQuery库文件-->
        <script src="js/jquery.js"></script>
    </head>
    <body>
        <button id="btn">一个按钮</button>
        <button id="btn1">一个按钮</button>
        <button id="btn2">一个按钮</button>
    </body>
    <script>
        //返回的是原生的DOM对象。你就调用原生JS提供的属性和方法，不能调用JQuery提供的属性和方法
        var btnObj = document.getElementById('btn');
        console.log(btnObj);
        btnObj.style.backgroundColor = "red";
        btnObj.style.color = 'white';

        //返回的是JQuery对象
        //JQuery对象 那么你调用JQuery提供的属性和方法，调用不了原生JS的属性和方法。
        var obj = $('#btn');
        console.log(obj);
        obj.css('height', '200px');
        obj.css('width', '200px');


        //原生的DOM对象和JQuery对象的互换
        // 原生的DOM对象--->JQuery对象 $(原生DOM对象)
        $(btnObj).css('font-size', '50px');
        // JQuery对象---->原生的DOM对象 调用JQuery对象提供的get()方法返回原生DOM对象
        var ysDOM = obj.get(0);
        ysDOM.style.border = '5px solid black';



    </script>
</html>

jQurey选择器

1.id选择器

$("#test")

2.class选择器

$(".test"）

3.标签选择器

$(”h1“)

4.子元素

$("div div p")
$("#d1").find("#d2").find("p")

5.兄弟元素

$("h5").next()

$("h5").nextAll()

元素选择

1.第一个元素

$('li').first()

2.最后一个元素

$('li').last()

3.索引元素

$('li').eq(2)