JQuery入门（一）

最新推荐文章于 2024-07-04 10:38:01 发布
原创 最新推荐文章于 2024-07-04 10:38:01 发布 · 378 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery

1、JQuery加载方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            jQuery(document).ready(function(){
                alert("aaa");
            });

            $(document).ready(function(){
                alert("bbb");
            });

            $(function(){
                alert("ccc");   
            });
        </script>
    </head>
    <body>
    </body>
</html>

2、JQ的获取

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            $(function(){
                //Js方式
                document.getElementById("btn").onclick = function(){
                    alert("aaa");
                }
                //JQ方式
                $("#btn").click(function(){
                    alert("ddd");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="点击" id="btn"/>
    </body>
</html>

3、DOM对象和JQ对象的转换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            function writejs(){
                //Js的DOM操作
                document.getElementById("span1").innerHTML = "好可爱";
            }
            $(function(){
                $("#btn").click(function(){
                    //JQ
                    $("#span1").html("呵呵呵");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="JS写入" onclick="writejs()"/>
        <input type="button" value="JQ写入" id="btn"/><br />
        哎呀<span  id="span1">你好帅</span>
    </body>
</html>

这里写图片描述
JQ无法使用innerHTML。JS也无法使用html(“value”)。

JQ对象和DOM对象可以相互转化：

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
    function writejs(){
        //Js的DOM操作
        //document.getElementById("span1").innerHTML = "好可爱";
        //DOM对象转化成JQ对象
        var spanELe = document.getElementById("span1");
        $(spanELe).html("卡哇伊");;
    }
    $(function(){
        $("#btn").click(function(){
            //JQ
            //$("#span1").html("呵呵呵");
            //JQ转化DOM，方式一
            $("#span1").get(0).innerHTML = "呵呵哒";
            //JQ转化DOM，方式二
            $("#span1")[0].innerHTML = "厉害啦！";
        });
    });
</script>

4、广告的弹出和消失

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            $(function(){
                timeShow = setInterval("showAd()",3000)
            });

            function showAd(){
                //$("#img1").show(2000);
                //$("#img1").show();
                //$("#img1").slideDown();
                $("#img1").fadeIn(3000);
                clearInterval(timeShow);
                timeHidden = setInterval("hiddenAd()",3000);
            }
            function hiddenAd(){
                //$("#img1").hide();
                //$("#img1").slideUp(3000);
                $("#img1").fadeOut();
                clearInterval(timeHidden);
            }
        </script>
    </head>
    <body onload="init()">
        <div>
            <img src="img/1.jpg" width="100%" style="display: none" id="img1"/>
        </div>
    </body>
</html>

5、Toggle的使用-实现隐藏和显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    $("#img").toggle();
                });
            });
        </script>
    </head>
    <body">
        <div>
            <input type="button" value="显示/隐藏" id="btn"/><br />
            <img src="img/1.jpg" id="img"/>
        </div>
    </body>
</html>

6、jquery的选择器
6.1、基本选择器

id选择器：$(“#id名称”);
元素选择器：$(“元素名称”);
类选择器：$(“.类名”);
通配符：*
多个选择器共用(并集)
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
    $(function(){
        $("#btn1").click(function(){
            $("#one").css("background-color","pink");
        });

        $("#btn2").click(function(){
            $(".mini").css("background-color","pink");
        });

        $("#btn3").click(function(){
            $("div").css("background-color","pink");
        });

        $("#btn4").click(function(){
            $("*").css("background-color","pink");
        });

        $("#btn5").click(function(){
            $("#two,.mini").css("background-color","pink");
        });
    }); 
</script>

6.2、层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
    $(function(){
        $("#btn1").click(function(){
            $("body div").css("background-color","gold");
        });

        $("#btn2").click(function(){
            $("body > div").css("background-color","gold");
        });

        $("#btn3").click(function(){
            $("#two + div").css("background-color","gold");
        });

        $("#btn4").click(function(){
            $("#one ~ div").css("background-color","gold");
        });
    });

</script>

6.3、基本过滤选择器

$('li').first() 等价于：$(“li:first”)

这里写图片描述

<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
    $(function(){
        $("#btn1").click(function(){
            $("body div:first").css("background-color","red");
        });

        $("#btn2").click(function(){
            $("body div:last").css("background-color","red");
        });

        /*奇数偶数从0开始*/
        $("#btn3").click(function(){
            $("body div:odd").css("background-color","red");
        });

        $("#btn4").click(function(){
            $("body div:even").css("background-color","red");
        });
    });
</script>

6.4、属性选择器
这里写图片描述

<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
    $(function(){
        $("#btn1").click(function(){
            $("div[id]").css("background-color","red");
        });

        $("#btn2").click(function(){
            $("div[id='two']").css("background-color","red");
        });
    });
</script>

6.5、表单选择器
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){

                $("#btn1").click(function(){
                    $(":input").css("background-color","pink");
                });

                $("#btn2").click(function(){
                    $(":text").css("background-color","pink");
                });

            });

        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="选择所有input元素" />
        <input type="button" id="btn2" value="选择文本框" />
        <br/>
        <form>
            <input type="text[还可以使用属性选择]" /><br />
            <input type="checkbox" /><br />
            <input type="radio" /><br />
            <input type="image" /><br />
            <input type="file" /><br />
            <input type="submit" />
            <input type="reset" /><br />
            <input type="password" /><br />
            <input type="button" /><br />
            <select><option/></select><br />
            <textarea></textarea><br />
            <button></button>
        </form>
    </body>
</html>

7、JQ完成表格的隔行换色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                /*//偶数行设置背景颜色
                $("tbody tr:even").css("background-color","yellow");
                //奇数行并设置背景颜色
                $("tbody tr:odd").css("background-color","green");*/

                //偶数行设置背景颜色
                $("tbody tr:even").addClass("even");
                //$("tbody tr:even").removeClass("even");
                //奇数行设置背景颜色
                $("tbody tr:odd").addClass("odd");

            });
        </script>
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

style.css中：

.even       { background:#FFF38F;}  /* 偶数行样式*/
.odd        { background:#FFFFEE;}  /* 奇数行样式*/

这里写图片描述

8、JQ完成全选和全不选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#select").click(function(){
                    //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
                    //attr方法与JQ的版本有关，在1.8.3及以下有效。
                    //$("tbody input").attr("checked",this.checked);
                    $("tbody input").prop("checked",this.checked);
                });
            });
        </script>
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tbl" >
            <thead>
                <tr>
                    <td colspan="4">
                        <input type="button" value="添加" />
                        <input type="button" value="删除" />
                    </td>
                </tr>
                <tr>
                    <th><input type="checkbox" id="select"></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

这里写图片描述

jQuery 文档操作 之 文档的插入操作、删除、复制和替换
沐埜专栏
10-03 283
//页面加载函数 $(function(){ /* * 内部插入：给标签添加子标签 * 1.在select中开始添加一项学前班 * 2.在select最后添加一项研究生 * 外部插入：给标签添加(同级标签)兄弟标签 * 1.在select中开始添加一项学前班 * 2.在select最后添加一项研究生 */ //内部插入 //$("#edu").prepend("学前班");
JQuery入门—编写一个简单的JQuery应用案例
10-27
标题“JQuery入门—编写一个简单的JQuery应用案例”指出了本篇文档将引导读者通过一个基础案例来了解如何开始使用JQuery。描述部分提到，首先需要引入JQuery文件库，这可以通过在HTML页面的标签内导入JQuery脚本文件...
jQuery基础
weixin_43544588的博客
06-23 243
jQuery高级 学习目标： 能够使用jQuery的3种动画效果(掌握) 能够使用jQuery对象的遍历方法(掌握) 能够使用jQuery全局的遍历方法(了解) 能够使用jQuery3.0的for-of遍历方法(了解) 能够使用jQuery的绑定与解绑方法(掌握) 能够使用jQuery的完成案例-广告的显示与隐藏(掌握) 能够使用jQuery的完成案例-抽奖程序(掌握) 能够理解jQuery的插件机制及其相关API(了解) 能够使用jQuery的表单校验插件进行表单校验(掌握) 能够使用表单校验插件的方法
HTML中调用JavaScript的几种情况和规范写法
weixin_33726943的博客
03-20 346
JavaScript运行在html中，引用有几种方式？ 我知道的方法有3种： 第一种：外部引用远程JavaScript文件，如<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>（相对路劲）或者是<script src="http:/...
jquery attr/attribute()方法
乐杨俊浅谈LAMP
10-16 8352
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，用一个attr()就可以全部搞定了,赞一个先 ^^ jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。 1. at
jQuery事件绑定方式
liuxiaoxiao
07-19 207
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> </head> <body > <!-- <a id="bt" href="ht.
jQuery 入门到精通
abments的博客
07-04 532
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它使 HTML 文档的遍历和操作、事件处理、动画以及 AJAX 交互更简单。jQuery 极大地简化了 JavaScript 编程，并且拥有强大的跨浏览器兼容性。无论是新手还是经验丰富的开发者，都可以从 jQuery 中受益。jQuery 官方文档jQuery 学习教程W3Schools jQuery 教程jQuery 速查表通过本篇详细的 jQuery 指南，我们从 jQuery 的基础知识、进阶技巧到项目实践进行了全面的讲解。
jQuery入门
08-09
### jQuery入门知识点详解 #### 一、jQuery简介 ##### 1-1 感性认识 **1-1-1 名称来历** - **名称解释**：“jQuery”是“JavaScript Query”的缩写，其中“Query”意为“查询”，表示jQuery提供了一种更便捷的...
jquery入门（一）
03-26
本篇将作为jQuery入门的起点，带领初学者逐步理解并掌握这个强大的工具。 ### 1. jQuery 的安装与引入 在开始学习jQuery之前，首先需要在项目中引入jQuery库。最常见的方式是通过CDN（内容分发网络）链接，这样...
jquery入门—编写一个导航条(可伸缩)
10-27
jQuery入门知识点包括如何利用jQuery实现一个可伸缩的导航条。具体实现方式是在导航条标题被点击时切换内容的显示与隐藏状态，从而达到简化内容或显示更多内容的效果。以下为详细知识点： 1. HTML结构：首先，需要...
JQuery入门，JQuery总结
01-05
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库，它的出现极大地方便了JavaScript的编程，使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more"，即用更...
【JQuery学习笔记一】理解JQuery对象含义和JQuery选择器的使用！
public_TIM的博客
11-22 790
一.JQuery是什么？ jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理
jQuery操作元素属性
浮生若梦
04-23 167
         jQuery如何操作元素属性?          先看一个例子： &lt;a id="easy" href="#"&gt;http://www.jquery001.com&lt;/a&gt;          现在要得到a标签的属性id。有如下方法： jQuery("#easy").click(function() { alert(document....
江南大学《机器学习》课程大作业：人脸图像性别分类研究
最新发布
08-17
资源下载链接为： https://pan.quark.cn/s/cbbca0734eb7 江南大学《机器学习》课程大作业：人脸图像性别分类研究（最新、最全版本！打开链接下载即可用！）
rhnsd-5.0.35-3.module_el8.1.0+211+ad6c0bc7.tar.gz
08-17
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
使用 Flask 开发集成 ECharts/Pyecharts 的机器学习模型部署 Web 程序
08-17
资源下载链接为： https://pan.quark.cn/s/1d8f808b0e2f 使用 Flask 开发集成 ECharts/Pyecharts 的机器学习模型部署 Web 程序（最新、最全版本！打开链接下载即可用！）
suwadaimyojin_lora-dataset-processor_49536_1755320309460.zip
08-17
suwadaimyojin_lora-dataset-processor_49536_1755320309460.zip
jQuery入门学习指南
### 知识点一：jQuery概述 jQuery是一个快速、小巧、功能丰富的JavaScript库。它使得HTML文档遍历和操作、事件处理、动画和Ajax变得简单易行。jQuery的语法设计得很精简，极大地简化了JavaScript编程，使得开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值