jQuery基础知识点（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45870314/article/details/124806738

本文详细介绍了jQuery的基础知识，包括其作为JavaScript类库的角色，强调了DOM加载完成后执行代码的重要性。jQuery的入门函数确保代码在DOM准备就绪后运行。接着，文章详细阐述了jQuery的css方法、addClass、removeClass、toggleClass、hasClass等操作类名的功能，以及如何使用text()、html()和val()方法来获取和修改元素内容及input值。这些方法简化了DOM操作，增强了浏览器兼容性。

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

一、什么是jQuery

jquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Ajax功能，强大的选择器功能，出色的DOM操作封装，出色的浏览器兼容性，可靠的事件处理机制，隐式迭代和链式编程操作，免费开源的库。

二、jQuery入口函数

为了防止文档在完全加载之前，运行jQuery代码，将jQuery放在入口函数中，即在DOM加载完成之后，才可以对DOM进行操作。

$(document).ready(function(){
    // 执行代码
});

$(function(){
    // 执行代码
});

三、jQuery基础语法

1、css方法

语法：第一种：$("元素名称").css(' name') 获取第一个匹配元素的样式属性。

第二种：$("元素名称").css(' name'，'value') 设置样式属性

第三种：是以对象的形式写多种样式

 $("").css({       
        ' name'：'value'，
        'backgroundColor': '#ddd',
        'fontWeight': '', 
     })

2、addClass方法

语法：$("p").addClass('属性名1 属性名2'); 给某个元素添加一个类名，可以是多个类名

$(".list li").mouseover(function () {
            $(this).addClass("on")
        })

3、removeClass方法

语法：语法：$("p").addClass('属性名1 属性名2'); 给某个元素删除一个类名，可以是多个类名

$(".list li").mouseover(function () {
            $(this).removeClass("on");

        })

4、toggleClass方法

语法：$("元素名称").toggleClass(“class”) 如果存在类就删除，如果没有就添加一个类

$(".list li").mouseover(function () {
            $(this).toggleClass("on")

        })

5、hasClass方法

语法：$("元素名称").hasClass(“class”) 查询指定的标签中是否有指定的类，有返回true，没有则返回false；

$(".list li").mouseover(function () {
            $(this).hasClass("on")

        })

6、获取内容和修改内容的方法 text()和html()

$("元素名称").text() 如果没有内容则获取到元素的内容，
$("元素名称").text('value') 有内容则修改该元素的内容为value
$("元素名称").html() 如果没有内容则获取到该元素的内容，
$("元素名称").html('value') 有内容则修改该元素的内容为value

7、val( )方法

语法：$("input元素名称").val(); 获取input元素的值

$("input元素名称").val(value); 设置input元素的值为value