jQuery框架入门

最新推荐文章于 2023-04-05 21:18:11 发布

原创最新推荐文章于 2023-04-05 21:18:11 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

javaScript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了jQuery的基础概念，包括其优点、来源及核心语法。通过实例演示了jQuery的使用环境，事件处理，对象转换，基本语法，选择器，DOM操作等内容，适合初学者快速掌握并应用。

一、jQuery的相关介绍

1、jQuery是什么？
简单的理解：JQuery就是由JavaScrip语言编写的一个JS文件库，里面封装了很多预定义函数(如：获取元素，执行隐藏等

2、jQuery的优点？
jQuery秉承：”write less do more“的宗旨，将大量的方法封装，以便于直接调用，不用重复定义；减少了JS开发工作量，提高了开发效率；同时他也是一个轻量级的、免费开源的框架，占用资源少，运行速度快，给予他的普及和推广提供了有利地位。

3、jQuery的来源？
jQuery的官网：https://www.jquery.com

4、jQuery的核心？
jQuery基础语法：$(selector).action();是为了HTML 元素的选取编制的，可以对元素执行某些操作。
语法解析：$:美元符号定义 jQuery；选择符（selector）“查询”和“查找” HTML 元素； action() 执行对元素的操作。

二、jQuery的使用环境

(一)jQuery的HelloWord

1、关于jQuery文件版本的选择

 jquery-3.3.1.js是标准版：代码可读性好，有注释，推荐开发中使用.

 jquery-3.3.1.min.js是压缩版：文件小，推荐企业中部署使用。

注意：标准版和压缩版共功能是完全一样的。

2、关于jQuery文件引入html中
创建一个js目录—>复制jquery到js目录下—>使用script标签导入jquery.js文件

导入jquery.js文件
<script src="js/jquery-3.3.1.js"></script>

3、jQuery使用的基本步骤
编写HTML文件—>引入jQuery文件—>使用jQuery获取元素—>使用浏览器测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第1个jQuery代码</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(function () {
            //我们的代码写在这里，会在网页加载完毕以后执行
            alert("Hello jQuery");
        });
    </script>
</body>
</html>

(二)$(function())与load()

1、$(function())是一个入口函数，也可以称为"文档就绪函数",因为导入的jquery文件在<head>中，
为了防止文档在完全加载（就绪）之前运行 jQuery 代码，所以所有的jQuery函数得放在$(function())中。

//格式一：
$(document).ready(function(){
--- jQuery functions go here ----
});

//格式二：
 $(function () {
--- jQuery functions go here ----
 });

2、$(funtion())类似于window.load()，两者都是在网页加载完毕以后执行特定的功能，唯一的区别在于：jQuery中每个入口函数都会依次执行，而window.load()只会执行最后这一次，后面的覆盖前面的。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
    <title>$(funtion())与window.onload的区别</title>
    <script src="js/jquery-3.3.1.js"></script>
</head><body><script type="text/javascript">
/*
		//1.jQuery中每个入口函数都会依次执行
    $(function () {
        alert("Hello jQuery1");
    });

    $(function () {
        alert("Hello jQuery2");
    });
 */
  
/*
		//2.只会执行最后这一次，后面的覆盖前面的
    window.onload = function () {
        alert("Window 1");
    }
    window.onload = function () {
        alert("Window 2");
    }
*/ 
</script></body>

三、jQuery的对象转换

jQuery对象转换是指:JavaScript对象和jQuery对象之间的转换，虽然jQuery框架是javaScript编写而成的，但是:两者的对象方法是不能通用的，只能使用自己的API。
1、jS对象与jQuery对象的区别

 jS对象：通过DOM中方法获得的元素都是JS对象，如：document.getElementById("id");
 jQuery对象：通过jQuery选择器选中元素，就是jQuery对象

2、转换语法

jS--->jQuery:  $(js对象);
jQuery--->js：jq对象[0]
注：jQuery对象本质上是一个jS 的数组对象。

3、对象转换的使用

<body><div id="div">我是div</div></body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // JS方式，通过id属性值获取div元素
    let jsDiv = document.getElementById("div");
    alert(jsDiv.innerHTML);
    //alert(jsDiv.html());  JS对象无法使用jQuery里面的功能

    // 将 JS 对象转换为jQuery对象
    let jq = $(jsDiv);
    alert(jq.html());

    // jQuery方式，通过id属性值获取div元素
    let jqDiv = $("#div");
    alert(jqDiv.html());
    // alert(jqDiv.innerHTML);   jQuery对象无法使用JS里面的功能

    // 将 jQuery对象转换为JS对象
    let js = jqDiv[0];
    alert(js.innerHTML);
</script>

四、jQuery的基本语法

(一)事件

在jQuery中事件相较于jS中的事件有个显著特点：所有的事件处理函数前面都没有on(比如：js中onclick，jq中是click())。

1、在js中事件是属性：document.getElementById("id").onclick=funtion(){};

2、在jq中事件是方法：$("#id").onclick(funtion(){})

1、事件的定义格式

方式一，单独定义：$(元素).事件方法名(要执行的功能);
方式二, 链式定义：$(元素).事件方法名1(要执行的功能)).事件方法名2(要执行的功能);

2、经常使用的事件

事件方法	功能	事件方法	功能
focus()	得到焦点	click()	单击事件
blur()	失去焦点	dblclick()	双击事件
mouseover()	鼠标移上	submit()	表单提交
mouseout()	鼠标移出	change()	改变事件

3、事件的使用

<body>
    <input type="button" id="btn" value="点我"> <br>
    <input type="text" id="input">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //单击事件
    $("#btn").click(function(){
        alert("点我干嘛?");
    });
    //获取焦点事件
     $("#input").focus(function(){
         alert("你要输入数据啦...");
     });

   // 失去焦点事件
    $("#input").blur(function(){
        alert("你输入完成啦...");
    });
</script>

4、事件的绑定和解绑

4.1 语法

绑定事件：$(selector).on("事件名称",function(){})
解绑事件：$(selector).off("事件名称")

4.2 使用

<body>
    <input type="button" id="btn1" value="点我">
    <input type="button" id="btn2" value="解绑">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //给btn1按钮绑定单击事件
    $("#btn1").on("click",function(){
        alert("点我干嘛?");
    });
    //通过btn2解绑btn1的单击事件
    $("#btn2").on("click",function(){
        $("#btn1").off("click");
    });
</script>

(二)遍历

遍历就将元素数组中的元素查询出来。
1、遍历方式

传统的方式：for循环
jQuery方式：$.each(容器对象,function(索引,元素))

2、遍历使用

<body>
    <input type="button" id="btn" value="遍历列表项">
    <ul>
        <li>大头儿子</li>
        <li>小头爸爸</li>
        <li>娜可露露</li>
    </ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //方式一：传统方式
    $("#btn").click(function(){
        let lis = $("li");
        for(let i = 0 ; i < lis.length; i++) {
            alert(i + ":" + lis[i].innerHTML);
        }
    });
    //方式二：$.each()方法
 
    $("#btn").click(function(){
        let lis = $("li");
        $.each(lis,function(index,ele){
            alert(index + ":" + ele.innerHTML);
        });
    }); 
</script>

五、jQuery的选择器

(一)选择器概述

1、选择器的作用：就是用来选去网页中各种元素，然后进行各种操作。

2、选择器的种类：基本选择器，层级选择器，过滤选择器，表单过滤选择器等。

(二)基本选择器

1、基本选择器的语法

元素选择器: $("元素的名称")
  id选择器: $("#id属性值")
  类选择器: $(".class的属性值")

2、基本选择器的使用

<body>
    <div id="div1">div1</div> <div class="cls">div2</div><div class="cls">div3</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.元素选择器---> $("元素的名称")
    let divs = $("div");

    //2.id选择器-----> $("#id的属性值")
    let div1 = $("#div1");

    //3.类选择器------>$(".class的属性值")
    let cls = $(".cls");
</script>

(三)层级选择器

1、层级选择器的语法

1. 后代选择器: $("A  B" ); 获取A元素下的所有元素
2. 儿子选择器: $("A > B"): 获取A元素下所有的B元素
3. 兄弟选择器：$("A + C"); 获取A元素同级相邻的下一个C元素
4. 兄弟选择器：$("A ~ C")：获取A元素所有同级C元素

2、层级选择器的使用

<body> 
<div>
		<span>s1
 					 <span>s1-1</span>   <span>s1-2</span>
		</span> 
</div>   
<div>  <p>p1</p>  </div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
   //1. 后代选择器 $("A B")
    let spans1 = $("div span");

   //2. 儿子选择器   $("A > B")
    let spans2 = $("div > span");

   //3. 兄弟选择器 $("A + B")
    let ps1 = $("div + p");
 
  // 4. 兄弟选择器 $("A ~ B")
    let ps2 = $("div ~ p");
</script>

(四)过滤选择器

1、过滤选择器的语法

类型	功能	类型	功能
：first	获取选中元素中首元素	：not()	不包括指定内容的元素
：last	获取选中元素中尾元素	:eq()	等于第几个
:even	偶数，从0开始计数	：gt	大于等n个,不含第index个
:odd	奇数，从0开始计数	:lt	小于等n个,不含第index个

2、过滤选择器的使用

<body>
    <div>div1</div>
    <div id="div2">div2</div>
    <div>div3</div>
    <div>div4</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.首元素选择器	$("A:first");
    let div1 = $("div:first");
    //alert(div1.html());

    // 2.尾元素选择器	$("A:last");
    let div4 = $("div:last");
    //alert(div4.html());

    // 3.非元素选择器	$("A:not(B)");
    let divs1 = $("div:not(#div2)");
    //alert(divs1.length);

    // 4.偶数选择器	    $("A:even");
    let divs2 = $("div:even");
    //alert(divs2.length);
    //alert(divs2[0].innerHTML);
    //alert(divs2[1].innerHTML);

    // 5.奇数选择器	    $("A:odd");
    let divs3 = $("div:odd");
    //alert(divs3.length);
    //alert(divs3[0].innerHTML);
    //alert(divs3[1].innerHTML);

    // 6.等于索引选择器	 $("A:eq(index)");
    let div3 = $("div:eq(2)");
    //alert(div3.html());

    // 7.大于索引选择器	 $("A:gt(index)");
    let divs4 = $("div:gt(1)");
    //alert(divs4.length);
    //alert(divs4[0].innerHTML);
    //alert(divs4[1].innerHTML);

    // 8.小于索引选择器	 $("A:lt(index)");
    let divs5 = $("div:lt(2)");
    alert(divs5.length);
    alert(divs5[0].innerHTML);
    alert(divs5[1].innerHTML);   
</script>

(五)表单过滤器

1、表单过滤器的语法

:enabled  -----> 可用
:disabled -----> 不可用
:checked  -----> 选中（单选radio ，多选checkbox
:selected -----> 选择（下拉列表\<select>中的\<option>）

2、表单过滤器的使用

<body>
    <input type="text" disabled>
    <input type="text" >
    <input type="radio" name="gender" value="men" checked>男
    <input type="radio" name="gender" value="women">女
    <input type="checkbox" name="hobby" value="study" checked>学习
    <input type="checkbox" name="hobby" value="sleep" checked>睡觉
    <select>
        <option>---请选择---</option>
        <option selected>本科</option>
        <option>专科</option>
    </select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.可用元素选择器  $("A:enabled");
    let ins1 = $("input:enabled");
    //alert(ins1.length);

    // 2.不可用元素选择器  $("A:disabled");
    let ins2 = $("input:disabled");
    //alert(ins2.length);

    // 3.单选/复选框被选中的元素  $("A:checked");
    let ins3 = $("input:checked");
    //alert(ins3.length);
    //alert(ins3[0].value);
    //alert(ins3[1].value);
    //alert(ins3[2].value);

    // 4.下拉框被选中的元素   $("A:selected");
    let select = $("select option:selected");
    alert(select.html());   
</script>
</html>

六、jQueryDOM操作

(一)操作文本

1、操作文本方法的特点：所有的方法既可以设置值(set)，又可以获取值(get)。

2、操作文本的方法：

方法	说明
html()	获取元素的文本内容
html(value)	设置元素的文本内容，解析标签

3、使用操作文本方法

<body>
    <div id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的文本">
    <input type="button" id="btn2" value="设置div的文本">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
   //1. html():获取元素的文本内容
     $("#btn1").click(function(){
        let value=$("#div").html();
        alert(value);  
        });
  //2. html(value)：设置元素的文本内容，解析标签
     $("#btn2").click(function(){
            $("#div").html("设置完毕");
        });
</script>

(二)操作对象

1、操作对象的方法

方法	说明	方法	说明
$(“元素”)	创建元素
append(元素)	添加成父级尾元素	prepend(元素)	添加成父级头元素
before(元素)	添加到当前元素前面	after(元素)	添加到当前元素后面
remove();	自己删自己	empty();	清空子元素

2、使用操作对象方法

<body>
    <div id="div"></div>
    <input type="button" id="btn1" value="添加一个span到div"> <br><br><br>

    <input type="button" id="btn2" value="将加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn3" value="将加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn4" value="将雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn5" value="将雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    <ul id="desc">
        <li id="jy">加油</li>
        <li id="xq">雄起</li>
    </ul>  <br><br><br>
    <input type="button" id="btn6" value="将雄起删除"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn7" value="将描述列表全部删除"> &nbsp;&nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 按钮一：添加一个span到div
    $("#btn1").click(function(){
        let span = $("<span>span</span>");
        $("#div").append(span);
    });

    //按钮二：将加油添加到城市列表最下方
    $("#btn2").click(function(){
        //$("#city").append($("#jy"));
        $("#jy").appendTo($("#city"));
    });

    //按钮三：将加油添加到城市列表最上方
    $("#btn3").click(function(){
        //$("#city").prepend($("#jy"));
        $("#jy").prependTo($("#city"));
    });

    //按钮四：将雄起添加到上海下方
    $("#btn4").click(function(){
        $("#sh").after($("#xq"));
    });

    //按钮五：将雄起添加到上海上方
    $("#btn5").click(function(){
        $("#sh").before($("#xq"));
    });

    //按钮六：将雄起删除
    $("#btn6").click(function(){
        $("#xq").remove();
    });

    //按钮七：将描述列表全部删除
    $("#btn7").click(function(){
        $("#desc").empty();
    });
</script></html>

(三)操作样式

1、操作样式的方法

方法	说明
css(name)	根据样式名称获取css样式
css(name,value)设置CSS样式	设置CSS样式
addClass(value)	给指定的对象添加样式类名
removeClass(value)	给指定的对象删除样式类名
toggleClass(value)	如果没有样式类名，则添加。如果有，则删除

2、使用操作样式方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作样式</title>
    <style>
        .cls1{
            background: pink;
            height: 30px;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid red;" id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的样式"> &nbsp;&nbsp;
    <input type="button" id="btn2" value="设置div的背景色为蓝色">&nbsp;&nbsp;
    <br><br><br>
    <input type="button" id="btn3" value="给div设置cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn4" value="给div删除cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn5" value="给div设置或删除cls1样式"> &nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.css(name)   获取css样式
    $("#btn1").click(function(){
        alert($("#div").css("border"));
    });
    // 2.css(name,value)   设置CSS样式
    $("#btn2").click(function(){
        $("#div").css("background","blue");
    });
    // 3.addClass(value)   给指定的对象添加样式类名
    $("#btn3").click(function(){
        $("#div").addClass("cls1");
    });
    // 4.removeClass(value)  给指定的对象删除样式类名
    $("#btn4").click(function(){
        $("#div").removeClass("cls1");
    });
    // 5.toggleClass(value)  如果没有样式类名，则添加。如果有，则删除
    $("#btn5").click(function(){
        $("#div").toggleClass("cls1");
    });
</script></html>

(四)操作属性

1、操作属性的方法

方法	说明
attr(name,[value])	获得/设置属性的值
prop(name,[value])	获得/设置属性的值(checked，selected)

2、使用操作属性的方法

<body>
    <input type="text" id="username"> 
    <br>
    <input type="button" id="btn1" value="获取输入框的id属性">  &nbsp;&nbsp;
    <input type="button" id="btn2" value="给输入框设置value属性">
    <br><br>

    <input type="radio" id="gender1" name="gender">男
    <input type="radio" id="gender2" name="gender">女
    <br>
    <input type="button" id="btn3" value="选中女">
    <br><br>
     <select>
        <option>---请选择---</option>
        <option id="bk">本科</option>
        <option id="zk">专科</option>
    </select><br>
    <input type="button" id="btn4" value="选中本科">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.attr(name,[value]):获得/设置属性的值
    //按钮一：获取输入框的id属性
    $("#btn1").click(function(){
        alert($("#username").attr("id"));
    });
    //按钮二：给输入框设置value属性
    $("#btn2").click(function(){
        $("#username").attr("value","hello...");
    });

    // 2.prop(name,[value]):获得/设置属性的值(checked，selected)
    //按钮三：选中女
    $("#btn3").click(function(){
        $("#gender2").prop("checked",true);
    });
    //按钮四：选中本科
    $("#btn4").click(function(){
        $("#bk").prop("selected",true);
    });
</script></html>