关于jQuery

于 2021-03-08 16:47:27 发布
阅读量116 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54636735/article/details/114453533
版权

1.什么是jQuery?
就是javaScript的库,就是一个js文件,封装了预定义函数,比如获取元素,执行隐藏,移动等,简化了JavaScript的编程
核心语法:
$();
2.入门案例
(1).编写HTML文件
(2).要想使用必须要引入jQuery文件
(3).使用Jquery获取元素
(4),.使用浏览器测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">我是div</div>
</body>
<!--引入jquery文件-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //js方式,通过id属性值来获取div
    let jsDiv = document.getElementById("div");
   //alert(jsDiv);
    //alert(jsDiv.innerHTML);
    //jQuery方式,通过id属性值来获取div元素
    let jqDiv = $("#div");
    alert(jsDiv);
    alert(jsDiv.html());
</script>
</html>

4.jQuery基本语法
JS对象和jQuery对象相互转换
jQuery在操作对象是更加方便
jQuery和js对象方法是不通用的
二者转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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("JS-DIV:" + jsDiv.innerHTML);
    //JS对象转换成JQ对象
    let jq = $(jsDiv);
    alert("JQ-DIV:" + jq.html())


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

    //将jqery对象转换成JS对象
    let js = jsDiv[0];
    alert(js.innerHTML);
</script>
</html>

5.事件的基本使用 在jQuery中将事件封装成了方法,去掉了JS中.on的语法
在这里插入图片描述
入口函数
$(function(){

})

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的使用</title>
</head>
<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>
</html>

事件的绑定和解绑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的绑定和解绑</title>
</head>
<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>
</html>

遍历操作

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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");
    //     lis.each(function (index, ele) {
    //         alert(index + ":" + ele.innerHTML);
    //     });
    // });
</script>
</html>

6.jQuery选择器
可以帮我们获取元素
例如:id选择器,类选择器,属性选择器等等
核心语法$();
基本选择器:
在这里插入图片描述
师例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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>
    //元素选择器 $("元素的名称")
    let divs = $("div");
    alert(divs.length);
    //id选择器 $("#id的属性值")
    let div1 = $("#div1");
    alert(div1);
    //类选择器 $(".class的属性值")
    let cls = $(".cls");
    alert(cls.length);
</script>
</html>

表单属性选择器
在这里插入图片描述
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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>
    //可用元素选择器
    let ins1 = $("input:enabled");
    // alert(ins1.length);
    不可用元素选择器
    let ins2 = $("input:disabled");
    // alert(ins2.length);
    //单选/复选被选中的元素
    let ins3 = $("input:checked");
    // alert(ins3.length);
    // alert(ins3[0].value);
    // alert(ins3[1].value);
    // alert(ins3[2].value);
    //下拉框被选中的元素
    let select = $("select option:selected");
    alert(select.html());
</script>
</html>

操作对象:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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>
    /*
       1. $("元素")   创建指定元素
       2. append(element)   添加成最后一个子元素，由添加者对象调用
       3. appendTo(element) 添加成最后一个子元素，由被添加者对象调用
       4. prepend(element)  添加成第一个子元素，由添加者对象调用
       5. prependTo(element) 添加成第一个子元素，由被添加者对象调用
       6. before(element)    添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
       7. after(element)     添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
       8. remove()           删除指定元素(自己移除自己)
       9. empty()            清空指定元素的所有子元素
   */
    //按钮一:添加一个spqn到div
    $("#btn1").click(function () {
       let span = $("<spqn>span<span></span>>");
        $("#div").append(span);
    });
    //按钮二:将加油添加到城市列表最下方
    $("#btn2").click(function () {
       // $("#city").append($("#city"));
        $("#jy").appendTo($("#city"));
    });
    //按钮三:将加油添加到城市列表最下面
    $("#btn3").click(function () {
        $("#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>

操作样式:
在这里插入图片描述

<!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>

7.综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
    <tr>
        <th style="text-align: left">
            <input style="background:lightgreen" id="selectAll" type="button" value="全选">
            <input style="background:lightgreen" id="selectNone" type="button" value="全不选">
            <input style="background:lightgreen" id="reverse" type="button" value="反选">
        </th>

        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //全选
    //为全选按钮添加单击事件
    $("#selectAll").click(function () {
        //获取所有的商品复选框元素,为其添加checked属性,属性值ture
        $(".item").prop("checked",true);
    });
    //全不选
    //为全不选按钮添加单击事件
    $("#selectNone").click(function () {
        //获取所有的商品复选框元素,为其添加checked属性,值为false
        $(".item").prop("checked",false);
    });
    //反选
    //为反选按钮添加复选框元素,为其添加checked属性,值为相反的状态
    $("#reverse").click(function () {
        //获取所有的商品复选框元素,为其添加checked属性,属性值是目前相反的状态
        let items = $(".item");
        items.each(function () {
            $(this).prop("checked",!$(this).prop("checked"));
        });
    });
</script>
</html>

8.综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机图片</title>
</head>
<body>
<!-- 小图 -->
<div style="background-color:red;border: dotted; height: 50px; width: 50px">
    <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
    <img src="" id="big" style="width: 400px; height: 400px; display:none;">
</div>

<!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.准备一个数组
    let imgs = [
        "img/01.jpg",
        "img/02.jpg",
        "img/03.jpg",
        "img/04.jpg",
        "img/05.jpg",
        "img/06.jpg",
        "img/07.jpg",
        "img/08.jpg",
        "img/09.jpg",
        "img/10.jpg"];
		
    //2.定义计数器变量
    let count = 0;
    
    //3.声明定时器对象
    let time = null;
    
    //4.声明图片路径变量
    let imgSrc = "";
    
    //5.为开始按钮绑定单击事件
    $("#startBtn").click(function(){
        //6.设置按钮状态
        //禁用开始按钮
        $("#startBtn").prop("disabled",true);
        //启用停止按钮
        $("#stopBtn").prop("disabled",false);
        
        //7.设置定时器，循环显示图片
        time = setInterval(function(){
            //8.循环获取图片路径
            let index = count % imgs.length; // 0%10=0  1%10=1  2%10=2 .. 9%10=9  10%10=0  
                    
            //9.将当前图片显示到小图片上
            imgSrc = imgs[index];
            $("#small").prop("src",imgSrc);
                    
            //10.计数器自增
            count++;
        },10);
    });


    //11.为停止按钮绑定单击事件
    $("#stopBtn").click(function(){
        //12.取消定时器
        clearInterval(time);
        
        //13.设置按钮状态
        //启用开始按钮
        $("#startBtn").prop("disabled",false);
        //禁用停止按钮
        $("#stopBtn").prop("disabled",true);
            
        //14.将图片显示到大图片上
        $("#big").prop("src",imgSrc);
        $("#big").prop("style","width: 400px; height: 400px;");
    });
    
    
     
</script>
</html>
chénJH.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于jquery
03-17
NULL 博文链接：https://ycscsjj-126-com.iteye.com/blog/566941
前端笔记关于JQuery
04-22
前端笔记关于JQuery
关于jquery中动态增加select,事件无效的快速解决方法
10-21
下面小编就为大家带来一篇关于jquery中动态增加select,事件无效的快速解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于jquery-seats-20230619
最新发布
06-19
关于座位动态jquery-seats。
关于jQuery UI 使用心得及技巧
01-19
1 jQuery UI 2 为我所用 2.1 Tabs 2.2 Accordion 2.2.1 使用基本的Accordion 2.2.2 实现打开多个标签 2.2.3 Accordion的嵌套 3 给插件应用主题——Theme Roller 3.1 更改配色 3.2 更改图标 4 相关连接 jQuery UI ...
关于JQuery
weixin_43752723的博客
04-21 104
简单的记录下我从书上学到的一些基础的JQuery，避免记性差忘了。 1.js更改元素内容是通过.innerHTML，而jquery是通过.html()/.text() <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <...
jquery事件
m_target的博客
07-27 129
jquery中的事件:         同js中的事件是一致         但是写法上不同                 $("").click(function(){}); jquery中的自定义事件:         //给对象绑定事件         $("p").bind("hello",function () {             console.log("hello.....
一个小时学会jQuery<最通俗易懂的讲解>
chetianyao8457的博客
08-07 1514
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读...
jQuery中$符号的作用
计算机技术学习与应用
11-11 2025
作为jQuery包装器，利用选择器来选择DOM元素（这个也是最强大的功能） 例如：$("table tr:nth-child(even)") 实用工具函数，作为几个通用的实用工具函数的命名空间的前缀 例如：$.trim(someString) 文档就绪处理程序，相当于$(document).ready(...) 例如：$(function(){...}); 里面的函数会在DOM树
jQuery的“$”
O鹏M 的专栏
04-06 1382
选择器：$("h2 a") 选择 下的 a标记。$("#id")  ID选择器$(".class") 类别选择器$("p:odd")  所以位于奇数行的标记  :odd  :even$("td:nth-child(1)") 所有表格行的第一个单元格实例：属性选择器.myClass{ /* 设定某个CSS类别 */ background-color:#005890; co
JQuery简介 - 什么是jQuery
热门推荐
柯晓楠
01-15 4万+
概念 官方概念： jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。 个人理解： jQuery是JavaScript的一个工具库，工具库就是指封装好的JavaScript函数，可以直接在程序中进行调用，那jQuery就是一款非常流行的JavaScript库。jQ...
关于Jquery获取对象的属性与值
hsd2012的专栏
08-01 1万+
1.获取对象的常用方法 $("*")  表示获取所有对象（一般都不会去使用） $("#XXX") ’获得 id=XXX 的元素对象（常用） $(".XXX") ’获得 class=XXX 的元素对象（常用） $("div") ' 标签选择器 选择所有的div元素  (常用) $("input[name='uname']")   获得input标签中name='
了解关于jQuery emoji的实例
04-12
当然，我可以为您提供关于jQuery emoji的实例。您可以通过在网页中引入jQuery和emoji插件，使用简单的代码就可以实现在文本框中输入表情。以下是一个基本的示例代码： HTML： ```html <div id="emoji-container">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值