jqure应用汇总

最新推荐文章于 2024-09-28 21:23:27 发布
最新推荐文章于 2024-09-28 21:23:27 发布
阅读量751 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36872096/article/details/76095199
这篇博客通过一系列HTML示例介绍了jQuery的基础应用，包括元素隐藏、鼠标悬停效果、DOM对象与jQuery对象的转换、放弃$符号、获取与设置内容、修改属性和CSS样式，以及添加、删除和切换类等操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jquery的基本应用</title>
    <script src="../../js/jquery-3.1.1.min.js" ></script><!--导入jquery文件-->
    <script type="text/javascript">
        /* $(document).ready(function(){//文档就绪函数。
         $('p').hide();//隐藏元素
         });//script若是放在上面，需要加上文档就绪函数，放在下面没必要
         */
        //简化版的文档就绪函数
        $(function(){
            $('p').hide();
        })
    </script>


</head>
<body>
<p>说好的不拖堂呢</p>
<p>说好的不拖堂呢</p>
<p>说好的不拖堂呢</p>
</body>
<!--
<script type="text/javascript">
    $('p').hide();//隐藏元素
</script>-->
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>通过修改样式来实现鼠标移动的效果</title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
    <style>
        img{
            margin: 10px 10px;
            border: 3px solid olivedrab;
        }
    </style>
</head>
<body>
<img src="../../image/new_01.jpg" alt=""/>
<img src="../../image/new_02.jpg" alt=""/>
<img src="../../image/new_03.jpg" alt=""/>
</body>
<script type="text/javascript">
    //选择元素，添加事件
    $('img').mouseover(function(){
        //css中两个元素，一个是要修改的元素名称，第二个是元素的值。
        $(this).css('border','6px solid orange');
    }).mouseout(function(){
        $(this).css('border',' 3px solid olivedrab');
    })
</script>
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>通过修改类名实现鼠标移动的效果</title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
    <style>
        img{
            margin: 10px 10px;
            border: 3px solid olivedrab;
        }
        .a{

            border: 6px solid orange;
        }

    </style>
</head>
<body>
<img  src="../../image/new_01.jpg" alt=""/>
<img src="../../image/new_02.jpg" alt=""/>
<img  src="../../image/new_03.jpg" alt=""/>
</body>
<script type="text/javascript">
    //选择元素，添加事件
    $('img').mouseover(function(){
        //可以直接在后面加丶，继续写。
        $(this).addClass('a');//添加类。
    }).mouseout(function(){
        $(this).removeClass("a");//删除类。
    })
</script>
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>原生dom对象和jquery对象的互相转换</title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="d">

</div>
<div id="e">

</div>
</body>
<script type="text/javascript">
    var d=document.getElementById('d');//（js对象定义）dom对象的定义。
    // d.innerText="ssssss";
    //var d=$("#d");这是jquery对象。
    //d.html('dasdsadasasd');这个方法中的d是（原生dom对象）js对象，要想在div中使用，需要用下一行代码
    $(d).html('sddddddddd');
    /*以上是原生dom对象（js对象）转换成jqurey对象之间的转换*/
    var e=$("#e");
    //e[0].innerText='sssssss'  jq对象转换成js对象第一种方法
    e.get(0).innerText='jhdnnfjdd'//jq对象转换成js对象第二种方法
</script>
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>放弃$符号</title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="a"></div>
</body>
<script type="text/javascript">
    jQuery.noConflict();//放弃$符号
    //$("#a").html('sssssssss')
    jQuery("#a").html('sssssssss');//下方在用到$符号，需要用jQuery代替。
</script>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html，text，val获取和设置元素中的内容</title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="d">
    <p>sadasdsadasasd</p>
    <a>qwertyytr</a>
    <!--加了xmp，把标签当作普通文本进行解析-->
    <xmp><p>dsafsdfsfdsdfs</p></xmp>
    cnnvhgkdkmc
    <input type="text" id="t" value="fjgjfvnuf"/>
</div>
</body>
<script type="text/javascript">
    //alert($('#d').html());//获取div标签的内部元素,连带着标签一起获取。
    // $("#d").html('<span>djdjd</span><h1>ddjdjdjd</h1>');修改div标签里的内容、
    //html里面，如果加内容就是修改，不加就是获取。
    //alert($('#d').text());//获取div标签内部的文本，不带标签。
    //$('#d').text('<p>1111111</p>dkdkddndn');
    //获取输入框的value值
    //alert($("#t").val())
    //修改value属性值
    $("#t").val('12345657')
</script>
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>attr获取和修改某个元素的属性值</title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>

</head>
<body>
<input type="text" name="123456" value=""/>
</body>
<script type="text/javascript" >
    //alert($("input").attr('name'));//获取name属性值
    /*$("input").attr('type','password');//修改input中的属性。
     $("input").attr('name','312');//修改input中的属性。
     $("input").attr('id','test');//修改input中的属性。*/
    $("input").attr({'name':'321','type':'password','id':'test'});
    //多个属性修改，写在一起的写法，调用attr方法，把所有要修改的属性放在{}里。
    // 属性之间用逗号隔开，属性名与属性值之间用冒号隔开
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>通过jquery修改css样式</title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>

</head>
<body>
<div>
    qwert
</div>
</body>
<script type="text/javascript">
    //$("div").css('background','red');修改单个的div的属性
    $("div").css({'background':'red','height':'200px','weight':'100px'
        ,'margin':'50px','padding':'50px'});
</script>
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>添加删除类</title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
    <style>
        div{
            height: 300px;
            width: 300px;
            background-color: #585858;
        }
        .a{
            background-color: #f2ad0a;
        }
    </style>
</head>
<body>
<div id="d">
    sdsad
</div>
</body>
<script type="text/javascript">
    $("#d").mouseover(function(){
        $(this).addClass('a');
    }).mouseout(function(){
        $(this).removeClass('a');
    })
</script>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>鼠标移动的时候，类如果有删除，没有就添加，toggleClass</title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
    <style>
        div{
            height: 300px;
            width: 300px;
            background-color: #585858;
        }
        .a{
            background-color: #f2ad0a;
        }
    </style>
</head>
<body>
<div id="d">
    sdsad
</div>
</body>
<script type="text/javascript">
    $("#d").mouseover(function(){
        $(this).toggleClass('a');
    }).mouseout(function(){//类如果有删除，没有就添加，toggleClass
        $(this).toggleClass('a');
    })
</script>
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>鼠标点击的时候，toggleClass</title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
    <style>
        div{
            height: 300px;
            width: 300px;
            background-color: #585858;
        }
        .a{
            background-color: #f2ad0a;
        }
    </style>
</head>
<body>
<div id="d">
    sdsad
</div>
</body>
<script type="text/javascript">
    /* $("#d").mousedown(function(){
     $(this).toggleClass('a');
     }).mouseup(function(){    鼠标点下变色，松开变回去。
     $(this).toggleClass('a');
     })*/
    var count=1;
    $("#d").click(function(){//点击一下，变一个颜色。
        $(this).toggleClass('a',count%3==0);//点击数量是3的倍数变色。
        //toggleClass中的count%3==0，是布尔型的变量。
        count++;
    })
</script>
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jquery方法添加。删除。克隆内容</title>
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>

</head>
<body>
<div>

</div>
</body>
<script type="text/javascript">
    var table=$("<table border='2'><tr><td>123456789</td></tr></table>");//添加一个表格。
    $("div").append(table);//添加表格给div，append方法是添加。
    //table.remove();//删除表格。remove是移除。
    table.clone().appendTo($('div'));//克隆一个表格，添加到div中。clone方法是克隆，appendto是添加到。
</script>
</html>
JQure分页插件
08-14
用于web开发，只要有用到分页的查询，就可以只查所有数据，分页全自动
jQuery
a526498268464的博客
11-09 409
1.传统绑定事件与监听事件的区别 .addEventListener("事件类型不带on",function(){}) 区别： 传统绑定事件只能执行一个函数 如果要用事件监听绑定多个函数的话 会一一执行 let button = document.getElementsByTagName("button"); button[0].onclick = function (ev){ alert("我是1") } button[1].onclick = function (ev){ ...
jqure1.4 文档
04-23
jquery-1.4.2的包和一个文档希望对学习jquery的人有点帮助
jquery官网(jquery下载官网)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-10 359
官网在哪里 官网 　　官方论坛 如何学习jquery 新手想要学习jQuery，可以从书籍和教程两个方面来学习。 你在公司是怎么用jquery的? 在公司使用jQuery插件，使用方法有如下几个步骤： 一、调用库文件 使用jQuery必须链接jQuery的库文件，无论是压缩版还是正常版，必须至少在网页中...
jqure学习帮助文档
05-30
jqure详细介绍了，jqure 的基本语法，和事件 帮你 15天 学会jqure。
jqure图片展示
04-24
在本资源"jqure图片展示"中，我们聚焦于使用jQuery来实现美观的图片展示效果。 jQuery的核心特性包括选择器（Selectors）、事件处理（Events）、效果（Effects）和Ajax。在图片展示的场景下，选择器功能可以让我们...
jQueryAPI.rar_jqure
09-24
总的来说，jQuery API文档是开发者学习和使用jQuery的宝贵资源，它详细解释了每个方法、函数和参数的用法，有助于快速掌握和应用jQuery技术。对于初学者和经验丰富的开发者来说，都是不可或缺的参考手册。通过深入...
jqure的demo
11-16
jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。...通过分析这些文件，开发者能够学习如何在实际项目中有效地应用jQuery，提升网页交互性和用户体验。
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选
a2868221132的博客
03-27 5887
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选
jQuery提交表单数据及其表单验证
中国土包子的专栏
12-06 1955
这回来说说jqure提交表单数据及其验证。 简简单单。相信大家一看代码注解就全部懂了。。。。 //初始化校验规则！！ function (){ validator=$("#subform").validate( //所检验的form { wrapper:"div", //上级包装 rules:{ // 输入规则
jQuery(1)__jQuery基础<对象,元素,属性>
Richard_xx的博客
08-10 391
什么是jquery 1.Jquery是一个js函数库,又常常被叫做jq,里面代码很多,但是用的时候代码很少,是目前js的主流框架 2.使用JQ就可以做出我们前面做过的所有效果,那为何还要学习js? Js是语言基础,jq是js的代码库的封装,比如在jq中我们不可能看到基本数据类型有哪些,因为js有哪些jq中使用得就是这些,不管js还是jq,都是我们做项目使用得工具而已,要做出漂亮并且高性能的
【JavaScript】JQuery基础知识及应用
最新发布
qiqizgl777的博客
09-28 1567
一、JQuery的导入方法 https://editor.youkuaiyun.com/md/?articleId=132214798 二、JQuery介绍 JQuery(JQ)：JS的一个类库（方法库：包含了大量的、有助于项目开发的属性和方法） 第一代版本1.xx.xx: 1.11.3 兼容所有浏览器的（包含IE6~8） -> 没有vue / react / angular 等框架之前（数据驱动），项目都是基于操作DOM完成的，基本上项目中都是使用JQ来完成的 第二代版本2.xx.xx: 放
jqure中ajax实现回显,基于Jquery+Ajax+Json实现分页显示附效果图
weixin_31280837的博客
08-05 321
1.后台action产生json数据。List blackList = blackService.getBlackInfoList(mobileNum,gatewayid,startDate,endDate);int totalRows = blackList.size();StringBuffer sb = new StringBuffer();sb.append("{\"totalCount\...
jqure中ajax实现回显,jquery用ajax实现级联
weixin_31776191的博客
08-05 315
1、刚开始页面初始化的时候调用该方法，将在页面显示初始化记录页面如图//列表初始化方法进入页面后调用$(document).ready(function(){$.ajax({url:'init.action',//请求的URLcache: false, //不从缓存中取数据data:{pid:2},//发送的参数type:'Get',//请求类型dataType:'json',//返回类型是JS...
jQuery简介、使用jquery
热门推荐
weixin_52629158的博客
05-14 2万+
jQuery 是一个 JavaScript库。(库里封装了很多方法，我们可以直接调用执行)write less, do more 写的更少，做的更多！jquery是什么？是javascript框架（库）。集成了大量的方法，属性。jQuery 极大地简化了 JavaScript 编程jQuery 很容易学习jquery英文官网jquery中文官网jQuery API 中文文档 | jQuery中文网jquery中文官网菜鸟教程jQuery 教程 | 菜鸟教程。
HTML---JQurey的基本使用
zhoutong2323的博客
01-09 1775
jQuery是一个JavaScript库，并提供了一个简洁而强大的API，使开发人员能够更容易地操作HTML元素、处理事件和执行动画。它使用CSS选择器来选择HTML元素，并提供了大量的方法来修改和操作这些元素。jQuery还提供了大量的插件，使开发人员能够轻松地扩展其功能。这些插件包括图表、表单验证、日期选择器等等。
jQuery简单入门
weixin_64436232的博客
03-16 4103
学习笔记
jQuery简介-01
qq_55624813的博客
11-19 8139
目录 异步请求局部刷新 架构 技术栈 执行过程 jQuery简介 什么是jQuery jQuery的语法 jQuery的优势 jQuery的使用 文档就绪事件 测试 总结 异步请求局部刷新 架构 主流方式： 技术栈 JavaScript 形成交互 jQuery 封装JavaScript，代码更加简洁高效 ajax 异步请求 json 数据传输 Web中间件(tomcat) 处理请求和响应 mysql数据库 存取数据 执行过程 用户页面中触发a
jQuery插件的使用和写法
hbd082014的博客
10-08 295
jQuery插件主要分为3种类型 1、封装对象方法的插件 这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势，有相当一部分 2、封装全局函数的插件 可以将独立的函数加到jQuery命名空间下。如常用的 3、选择器插件 插件的基本要点 1、所有对象方法都应该附加到jQuery.fn对象上，而所
jqure settimeout
05-31
jQuery setTimeout() 方法用于延迟指定时间后执行指定函数。它与原生的 JavaScript setTimeout() 方法类似，但是更容易使用和更加兼容不同浏览器。 语法如下： ```javascript $(selector).setTimeout(function, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值