JQuery基础解析

最新推荐文章于 2022-08-29 22:28:56 发布

放肆的青春゛つ

最新推荐文章于 2022-08-29 22:28:56 发布

阅读量175

点赞数

分类专栏： jQuery 文章标签： jquery

本文为博主原创文章，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/weixin_43725517/article/details/108104925

版权

jQuery 专栏收录该内容

5 篇文章 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

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>

放肆的青春゛つ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery基础解析

目录1. 概念2.快速入门3. JQuery对象和JS对象区别与转换4. 选择器1. 概念一个JavaScript框架。简化JS开发Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已2.快速入门1. 下载JQuery2...
复制链接

扫一扫