JQuery基础解析

快来打我* 2022-11-29 05:55 97阅读 0赞

**目录**

1. 概念

2. 快速入门

3. JQuery对象和JS对象区别与转换

4. 选择器

基本选择器

表单选择器

--------------------

## 1. 概念 ##

**一个JavaScript框架。简化JS开发**

Query是一个**快速、简洁的JavaScript框架**，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨    是**“write Less，Do More”**

**JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已**

## 2. 快速入门 ##

**[1. 下载JQuery][1. _JQuery]**

2. 导入JQuery的js文件：导入min.js文件

**3. 使用**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery</title>
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
    <script>
       //使用JQuery获取元素对象
        var div1 = $("#div1");
    	alert(div1.html());
        var div2 = $("#div2");
    	alert(div2.html());
    </script>
    </body>
    </html>

## 3. JQuery对象和JS对象区别与转换 ##

**dom对象**，使用javascript的语法创建的对象叫做dom对象， 也就是**js对象。**

var obj=  document.getElementById("txt1");

obj是dom对象，也叫做js对象

**jquery对象**： **使用jquery语法**表示对象叫做jquery对象, **注意：jquery表示的对象都是数组**

var jobj =  $("\#txt1");  jobj就是使用jquery语法表示的对象，**也就是jquery对象。 它是一个数组**

**JS对象可以和jquery对象相互的转换**

**           dom对象可以转为jquery ， 语法： $(dom对象)**

**           jquery对象也可以转为dom对象：从数组中获取第一个对象，第一个对象就是dom对象， 使用\[0\]或者get\{0)**

**案例：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
        <script>
            function fun1(){
                //JS对象
                var text = document.getElementById("text");
                alert(text.value);
                //转为jQuerty对象
                var j_text = $(text);
                alert(j_text.val());
            }
            function fun2(){
                var inputs = $("input");
                //jQuery对象转为JS对象
                var psw_input = inputs.get(1);
                alert(psw_input.value);
                
            }
        </script>
    </head>
    <body>
        <input type="text" id="text" placeholder="文本框"/><br/>
        <input type="password"id="psw" placeholder="密码框"/><br/>
        <input type="button" value="单击1" onclick="fun1()"/><br/>
        <input type="button" value="单击2" onclick="fun2()"/>
    </body>
    </html>

**为什么要进行dom和jquery的转换 ：**

**目的是要使用对象的方法，或者方法，**当你的dom对象时，可以使用dom对象的属性或者方法， 如果你要想使用jquery提供的函数，必须是jquery对象才可以。

## 4. 选择器 ##

###   基本选择器 ###

**  选择器:** 就是**定位条件**；通知 jquery 函数定位满足条件的 DOM 对象

根据 ID，class 属性，标签类型名定位 HTML 元素，转为 jQuery 对象

**      1. id 选择器**

语法：$(“\#id名称”)

**      2.class 选择器 **

**           语法：$(“.class名称”) **

**      3. 标签选择器 **

**          **语法：$(“标签名”)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
        <style>
            div {
                width: 100px;
                height: 100px;
                background: pink;
                color: royalblue;
            }
        </style>
    </head>
    <body>
        <div id="one" class="first">第一个div</div><br/>
        <div id="two" class="second">第二个div</div>
        <input type="button" value="button1" onclick="fun1()"><br/>
        <input type="button" value="button2" onclick="fun2()"><br/>
        <input type="button" value="button3" onclick="fun3()"><br/>
    </body>
    <script>
        function fun1(){
            var div_one = $("#one");
            div_one.css("background","red");
        }
        function fun2(){
            var div_one = $(".two");
            div_one.css("color","black");
        }
        function fun3(){
            var div_one = $("div");
            div_one.css("background","red");
        }
    </script>
    </html>

**      4.所有选择器  **

语法：$(“\*”) 选取页面中所有 DOM 对象

**     5.组合选择器 **

**       **     组合选择器是**多个被选对象间使用逗号分隔后形成的选择器**，可以组合 id，class，标签名等。

**            语法：$(“id,class,标签名”)  **

### **表单选择器 ** ###

表单相关元素选择器是指**文本框**、**单选框**、**复选框**、**下拉列表**等元素的选择方式。该方法**无论是否存在表单<form>**，**均可做出相应选择， **表单选择器是为了能更加容易地操作表单， 表单选择器是根据元素类型来定义的。

**        语法： $(":type 属性值") **

**        $(":text")选取所有的单行文本框 **

**       $(":password")选取所有的密码框 **

**       $(":radio")选取所有的单选框 **

**       $(":checkbox")选取所有的多选框 **

**       $(":file")选取所有的上传按钮 **

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        姓名<input type="text" ><br/>
        密码<input type="password"><br/>
        性别<br/>
        <input type="radio" name="sex" value="男">男<br/>
        <input type="radio" name="sex" value="女">女<br/>
        爱好<br/>
        <input type="checkbox" value="看书">看书<br/>
        <input type="checkbox" value="下棋">下棋<br/>
        <input type="file" value="上传文件"><br/>
        <input type="button" value="text获取" onclick="fun1()"><br/>
        <input type="button" value="password获取" onclick="fun2()"><br/>
        <input type="button" value="radio获取" onclick="fun3()"><br/>
        <input type="button" value="checkbox获取" onclick="fun4()"><br/>
        <input type="button" value="file获取" onclick="fun5()"><br/>
    </body>
    <script>
        function fun1(){
            var text = $(":text");
            alert(text.val());
        }
        function fun5(){
            var file = $(":file");
            alert(file.val());
        }
        function fun2(){
            var psw = $(":password");
            alert(psw.val());
        }
        function fun3(){
            var radios = $(":radio");
            for(var i=0;i<radios.length;i++){
                alert(radios[i].value);
            }
        }
        function fun4(){
            var checkboxs = $(":checkbox");
            for(var i=0;i<checkboxs.length;i++){
                alert(checkboxs[i].value);
            }
        }
    </script>
    </html>

[1. _JQuery]: https://jquery.com/download/