jQuery知识点

一、什么是jQuery

jQuery是一门轻量的、免费开源的javascript函数库，主要作用是用于简化javascript代码

jQuery的核心思想："写的更少，但做的更多"

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

jQuery的优势

1,简化了js的写法，用$替代了document.getXxx()

2,可以像CSS选择器一样非常方便的获取元素

3,可以通过修改css样式控制页面的效果

二、jQuery的引入方式

1.jQuery的使用方式
下载后引入

 <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>

三、 jQuery入口函数

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

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

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

四、jQuery的语法
 

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法是：$(selector).action()

$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

1、基本选择器

元素选择器:

$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素

id 选择器：

$("#one") -- 选中id为one的元素
$("p#demo") -- 选取所有 id="demo" 的p元素

class 选择器

$(".mini") -- 选中所有class值为mini的元素
$(".test") -- 选中所有class值为test的元素

属性选择器

$("[href]") -- 选取所有带有 href 属性的元素
$("[href='#']") -- 选取所有带有 href 值等于 "#" 的元素

2、css()方法

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

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

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

 $("div").css({       
        'backgroundColor': '#ddd',
        'width':'200px'
     })

 3、removeClass()方法

语法：$("p").addClass('属性名1 属性名2');

给某个元素删除一个类名，可以是多个类名 

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

 4、toggleClass()方法

toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。

语法：$("元素名称").toggleClass(“class”) 

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果.

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

5、hasClass()方法

hasClass() 方法检查被选元素是否包含指定的类名称。

语法：$("元素名称").hasClass(“class”) 

如果被选元素包含指定的类，该方法返回 "true"。

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

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

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

7、val()方法

val() 方法返回或设置被选元素的 value 属性。

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

$(selector).val()

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

$(selector).val(value)