HTML-jQuery入门

最新推荐文章于 2022-08-29 20:29:12 发布
最新推荐文章于 2022-08-29 20:29:12 发布
阅读量334 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/samuelandkevin/article/details/78183584
版权

参考资料：
jQuery中文在线手册

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

    </body>
</html>
JS与JQ页面加载区别
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS与JQ页面加载区别</title>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            window.onload = function(){
                alert("张三");
            }

            //传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
            window.onload = function(){
                alert("老王");
            }

            //JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)
            jQuery(document).ready(function(){
                alert("李四");
            });

            //JQ不存在覆盖问题，加载的时候是顺序执行
            $(document).ready(function(){
                alert("王五");
            });

            //简写方式
            $(function(){
                alert("汾九");
            });

        </script>
    </head>
    <body>
    </body>
</html>
JQ获取
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQ的获取</title>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                //1.JS方式获取
                /*document.getElementById("btn").onclick= function(){
                    location.href="惊喜.html";
                }*/

                //2.JQ方式获取=====>>>$("#btn")
                $("#btn").click(function(){
                    location.href="惊喜.html"
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="点我有惊喜" id="btn"/>
    </body>
</html>
Dom与JQ对象之间的转换
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dom与JQ对象之间的转换</title>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            function write1(){
                //1.JS的DOM操作
                //document.getElementById("span1").innerHTML="萌萌哒！";
                //DOM对象无法操作JQ对象里面属性和方法
                //document.getElementById("span1").html("萌萌哒！");

                var spanEle = document.getElementById("span1");

                //将DOM对象转换成JQ对象
                $(spanEle).html("思密达");
            }


            $(function(){
                $("#btn").click(function(){
                    //JQ对象无法操作JS里面的属性和方法！！！
                    //$("#span1").innerHTML="呵呵哒！"
                    $("#span1").html("呵呵哒！");

                    //JQ对象向DOM对象转换方式一
                    $("#span1").get(0).innerHTML="美美哒！";

                    //JQ对象向DOM对象转换方式二
                    $("#span1")[0].innerHTML="棒棒哒！";

                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="JS写入" onclick="write1()"/>
        <input type="button" value="JQ写入" id="btn"/><br />
        班长：<span id="span1">你好帅！</span>
    </body>
</html>
jQuery基本选择器
<!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(){
                    $("#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>

    </head>
    <body>
        <input type="button" id="btn1" value="选择为one的元素"/>
        <input type="button" id="btn2" value="选择样式为mini的元素"/>
        <input type="button" id="btn3" value="选择所有的div元素"/>
        <input type="button" id="btn4" value="选择所有元素"/>
        <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>
jQuery层级选择器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            $(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>


    </head>
    <body>
        <input type="button" id="btn1" value="选择body中的所有的div元素"/>
        <input type="button" id="btn2" value="选择body中的第一级的孩子"/>
        <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
        <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>

        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>
jQuery基本过滤选择器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本过滤选择器</title>
        <link rel="stylesheet" href="../../css/style.css" type="text/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");
                });

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

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


    </head>
    <body>
        <input type="button" id="btn1" value="body中的第一个div元素"/>
        <input type="button" id="btn2" value="body中的最后一个div元素"/>
        <input type="button" id="btn3" value="选择body中的奇数的div"/>
        <input type="button" id="btn4" value="选择body中的偶数的div"/>

        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>
jQuery属性选择器
<!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(){
                    $("div[id]").css("background-color","red");
                });

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

            });
        </script>


    </head>
    <body>
        <input type="button" id="btn1" value="选择有id属性的div"/>
        <input type="button" id="btn2" value="选择有id属性的值为two的div"/>

        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>

        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>

        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>

        <span id="four">

        </span>
    </body>
</html>
jQuery表单选择器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单选择器</title>


    </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>
jQuery实现复选框的全选和全不选
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用jQuery完成复选框的全选和全不选</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <!--<script type="text/javascript" src="../js/jquery-1.11.0.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>
临海听风V
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html使用jq
hql1024的博客
04-17 253
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面标题</title> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min....
html jq 操作
atares0223的博客
07-27 351
$("#mySelect option:first").prop("selected", 'selected');  选中第一个
html中写jq,jQuery中html()方法用法实例
weixin_35389904的博客
05-31 436
本文实例讲述了jQuery中html()方法用法。分享给大家供大家参考。具体分析如下：此方法能够设置和取得匹配元素的HTML内容，原来的内容将会被新设置的内容替换。特别说明:HTML内容就是内容中可以包含HTML标签，并且能够被浏览器渲染。文本内容是先将内容中的HTML预定义字符转换成html字符实体，这样HTML标签就不会被渲染。语法结构一:$(selector).html()此时方法不带参数时...
html和jq基础代码
qq_40649432的博客
08-25 311
html基础代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>测试</title> </head> <body&
常用的Jq与html总结
qq_39710056的博客
12-14 324
jsp,html页面中的比较大小 用 EL表达式比较 相等( equal ) ：eq 不相等( not equal )： ne / neq 大于( greater than )： gt 小于( less than )： lt 大于等于( great than or equal ) ： ge/ gte （&lt;%@taglib prefix=“c” uri=“http://java.sun.c...
01-jQuery入门.ppt
最新发布
12-12
"jQuery入门"这个主题通常会涵盖以下几个方面： ### 1. jQuery概述 jQuery是由John Resig在2006年创建的一个轻量级的库，它的核心理念是"Write Less, Do More"。这意味着开发者可以用更少的代码实现更多的功能，...
初窥JQuery-Jquery简介 入门了解篇
10-28
本文将对JQuery的基本概念、主要功能和优势进行深入介绍，帮助初学者快速入门。 首先，JQuery的核心理念是“Write Less, Do More”，它通过提供一种更为高效的方式来操作DOM（文档对象模型），使开发者可以更便捷地...
jQuery-入门.pdf
03-20
jQuery的入门通常从简单的元素选择和操作开始，例如选取页面上的某个元素，然后执行一个动作，如改变其内容或样式。 ```javascript <!DOCTYPE html> <html> <script src="jquery-1.3.2.min.js"> $(document)....
课题-jQuery-LigerUI-使用教程入门篇.docx
11-11
jQuery LigerUI 是一款强大的前端UI库，专为快速构建Web前端界面而设计。它基于JavaScript库jQuery，提供了一系列插件，涵盖了基础组件、导航、布局、表单、表格、树形视图以及窗口等丰富的功能，使得开发者能够便捷...
课题-jQuery-LigerUI-使用教程入门篇.pdf
11-11
1. **引入资源**：在HTML文件中，你需要引入jQuery库，以及LigerUI的CSS和JS文件。通常这些文件可以从LigerUI的CDN或者本地路径引用。 2. **初始化控件**：通过jQuery的选择器找到对应的DOM元素，然后调用....
HTML中的jquery
wssjiayou的博客
08-29 1750
HTML中的jquery
【笔记】jQuery学习
不二D荧林仕的博客
10-15 868
十分详细的jQuery的学习笔记，包含部分案例的知识点
在HTML中使用JS
可以叫我啪叽的石头
06-10 8223
这是js高程的第二章，主要讲的内容就是怎样在HTML中使用javascript。 这章的内容包含四个部分： * &amp;lt;script&amp;gt; 标签 * 嵌入脚本和外部脚本 * 文档模式的影响 * 禁用javascript的场景 &amp;lt;script&amp;gt; 标签 向HTML页面中插入JavaScript的主要方法，就是使用&amp;lt;script&amp;gt;元素。 html 4.01给...
Jquery 实现新闻列表的滚动
Carina的编程技术博客
06-26 3684
Jquery 实现新闻列表的滚动            //1、鼠标移入移出事件，定义定时器时间            //2、鼠标移入，停止新闻滚动，清除定时器            //3、鼠标移出，定时器开始使新闻滚动，定义定时器            //4、显示图片效果（a获取第一行ul，b获取li行高，c动画将ul上移一个li的行高，显示出第二个li，d动画执行完后将第一个li追加移动...
html运用jquery的写法,jquery 怎么写
weixin_36408867的博客
06-03 519
jquery 怎么写?jquery 在页面中三种写法jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别在于 2.x 不再兼容 IE6、7、8浏览器，这样做的目的是为了兼容移动端开发。由于减少了一些代码，使得该版本比 jQuery 1.x 更小、更快。如果开发者比较在意老版本 IE 用户，只能使用 jQuery 1.9 及之前的版本了。jQuery是一个JavaScript脚本库，不需...
HTML JQuery
活捉一只技术白的博客
06-29 1103
HTML JQuery 简单应用 文章目录HTML JQuery 简单应用简介准备代码结果 简介 jQuery 是一个JavaScript 库，极大地简化了JavaScript 编程。 例如：通过 id 来查找 HTML 元素 JavaScript var myElement = document.getElementById("id01"); jQuery var myElement ...
JQuery中的html()方法
wt_better的博客
10-26 4980
html() html(htmlString) html(function)
HTML入门学习资料
samuelandkevin的专栏
06-07 523
HTML入门学习资料 Flex 布局教程：语法篇
jQuery入门到精通指南
1. Falling in Love with jQuery：这一章介绍JQuery的基本理念，为何它在Web开发中如此流行，并提供了一些基本的JQuery代码示例，帮助读者快速入门。 2. Selecting, Decorating, and Enhancing：讲解如何使用JQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值