Java研学-jQuery(二)

最新推荐文章于 2024-05-16 10:23:10 发布
最新推荐文章于 2024-05-16 10:23:10 发布
阅读量410 收藏 8
点赞数 9
分类专栏： # Java研学 文章标签： java jquery 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhlyxx/article/details/136797896
版权

九 jQ事件绑定

1 事件绑定

1. 标签中使用on事件属性
<button onclick=”clickT()”></button>

2. 通过JS给标签设置 on 事件属性
btn.onclick = function(){}

3. 通过JS调用方法的方式
W3C：btn.addEventListner(事件名, 响应函数);
IE：btn.attchEvent(事件名, 响应函数);

4. 页面加载事件处理，可绑定多个处理函数
jQuery对象.click(fn)

2 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<button id="btn1">btn1</button>
<button id="btn2" class="myBtn">btn2</button>
<button id="btn3" class="myBtn">btn3</button>
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
    //页面加载函数 保证页面加载顺序
    // window.οnlοad=function (){
    //
    // }
    //页面加载函数：文档就绪函数(jq写法)
    // $(function (){
    //     //btn1绑定事件
    //     $("#btn1").click(function (){
    //         console.log("jq绑定第一个按钮")
    //     })
    //     //btn2绑定事件
    //     $(".myBtn").click(function (){
    //         console.log("class样式绑定事件")
    //     })
    // })

    // JS方法btn1绑定事件
    // var btn1 = document.getElementById("btn1");
    // btn1.οnclick=function () {
    //     console.log(this)//this表示js dom对象
    // }

    // JQ方法btn1绑定事件
    $("#btn1").click(function () {
        console.log(this) //js对象 直接用this不能调用JQ对象
        console.log($(this))//jq对象
    })
</script>
</body>
</html>

十 jQ文档操作

1 常用方法

1. 给元素添加子元素，且是最小的子元素。
append()

2. 给元素添加弟弟元素。
after()

3. 用于删除选定元素的所有子节点。这不会删除元素本身，只会删除其内部的内容。
empty()

4. 用于删除选定元素及其所有子节点。这是一个更彻底的方法，它会从DOM中完全移除元素。
remove()

5. detach() 方法与remove()类似，也是用于从DOM中删除元素及其所有子节点。但不同之处在于，detach()会保留所有jQuery数据和事件处理程序，以便将来可以再次将这些元素添加到文档中。
detach()

2 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom操作方法</title>
</head>
<body>
<span style="background-color : blue;color: red;" id="span">SPAN</span>
<div id="div1" style="background-color: gray;">DIV1</div>
<div id="div2" style="background-color: green;">DIV2</div>
<ul id="ul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<input id="btn" type="button" value="删除我"/>
<form>
    <fieldset>
        <legend>内部插入节点(插入子节点)</legend>
        <input type="button" value="append" id="append"/>
    </fieldset>
</form>
<form>
    <fieldset>
        <legend>外部插入节点(插入兄弟节点)</legend>
        <input type="button" value="after" id="after"/>
    </fieldset>
</form>

<form>
    <fieldset>
        <legend>删除节点</legend>
        <input type="button" value="删除所有子节点" id="empty"/>
        <input type="button" value="删除节点" id="remove"/>
        <input type="button" value="恢复节点" id="resume"/>
    </fieldset>
</form>
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
    //1.删除元素 按钮绑定事件
    $("#btn").click(function () {
        // 当前对象执行remove
        $(this).remove();
    })
    // 2.内部插入节点(插入子节点)
    $("#append").click(function (){
        $(this).after($("#ul")) //将无序列表添加到按钮的后面
    })
    //3.div1添加span
    $("#append").click(function () {
        $("#div1").append($("#span"));
    })
    //4.div2后面添加一个div1
    $("#after").click(function () {
        $("#div2").after($("#div1"));
    })
</script>
</body>
</html>

十一 jQ元素属性操作的方法

1 属性操作的方法

1.用于获取或设置被选元素的样式属性。
css()

2.用于获取或设置表单字段（如 input、select、textarea）的值
val()

3.用于向被选元素添加一个或多个类。
addClass()

4.用于从被选元素移除一个或多个类
removeClass()

5.用于获取或设置被选元素的属性和属性值，特别是那些返回布尔值的属性，如 checked, selected, disabled 等。
prop()

6.用于在指定的元素上存储和获取数据。这允许你附加额外的信息到DOM元素上，而不需要改变其HTML结构。
data()

7.用于获取或设置被选元素的属性值。
attr()

2 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素属性操作</title>
    <style type="text/css">
        .other {
            background-color: orange;
            font-size: 20px;
        }
        .myBtn{
            background-color: red;
        }
    </style>
</head>
<input id="btn" type="button" value="点我"/>
<form>
    <fieldset>
        <legend>属性操作</legend>
        <input type="button" value="获取属性值" id="getAttr"/>
        <input type="button" value="设置属性值" id="setAttr"/>
    </fieldset>
</form>

<form>
    <fieldset>
        <legend>CSS 操作</legend>
        <input type="button" value="添加CSS" id="addClass"/>
        <input type="button" value="删除CSS" id="removeClass"/>
        <input type="button" value="轮换CSS" id="toggleClass"/>
        <input type="button" value="判断CSS" id="hasClass"/>
    </fieldset>
</form>

<input type="checkbox" value="1" checked name="gender" id="gender" data-option='{"name" : "蒋干"}'
       style="color: red; background: aqua" class="myBtn other" > 男
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
    //点我  设置样式
    $("#btn").click(function (){
        //添加样式:需要提前写好样式代码
        $(this).addClass("myBtn");
        //移除元素的样式
        // $(this).removeClass("other");
        //判断元素是否有样式
        $(this).hasClass("other");
    })
    //属性操作：一个参数方法表示获取属性值  两个参数方法表示设置属性值
    //获取属性值
    $("#getAttr").click(function (){
        //获取点我的id
        console.log($("#btn").attr("id"))

    })
   //设置属性值
    $("#setAttr").click(function (){
        $("#btn").attr("type","123");
        console.log($("#btn").attr("type"))
    })
    //获取复选框选中属性
    console.log( $("#gender").attr("checked"))//返回字符串checked
    console.log( $("#gender").prop("checked"))//返回true判断用这个
</script>
</body>
</html>

十二 常见demo

1 下拉框回显

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框回显练习</title>
</head>
<body>
<select id="s1">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3" >选项3</option>
    <option value="4">选项4</option>
    <option value="5">选项5</option>
</select>
<br/>
<input type="button" value="回显第3个选项" onclick="echo();"/><br/>
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
   function  echo(){
       //选项3默认选中
      $("option:eq(2)").prop("selected",true);
      //获取下拉框选中的值
       console.log($("#s1").val())
   }
</script>
</body>
</html>

2 下拉框选项移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框选项移动练习</title>
</head>
<body>
<table border="1">
    <tr>
        <td>
            <select id="select1" style="width:100px;height:200px" size="10" multiple="multiple">
                <option value="选项1">选项1</option>
                <option value="选项2">选项2</option>
                <option value="选项3">选项3</option>
                <option value="选项4">选项4</option>
                <option value="选项5">选项5</option>
                <option value="选项6">选项6</option>
                <option value="选项7">选项7</option>
                <option value="选项8">选项8</option>
                <option value="选项9">选项9</option>
            </select>
        </td>
        <td align="center">
            <input type="button" onclick="moveSelected('select1','select2')" value="-->"/><br/>
            <input type="button" onclick="moveAll('select1','select2')" value="==>"/><br/>
            <input type="button" onclick="moveSelected('select2','select1')" value="<--"/><br/>
            <input type="button" onclick="moveAll('select2','select1')" value="<=="/>
        </td>
        <td>
            <select id="select2" style="width:100px;height:200px" size="10" multiple="multiple"></select>
        </td>
    </tr>
</table>
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
    //移动所有下拉选项
    function  moveAll(select1,select2){
        $("#"+select2).append($("#"+select1+" > option"));
    }
    //移动被选中的下拉选项
    function  moveSelected(select1,select2){
        $("#"+select2).append($("#"+select1+" > option:selected"));
    }
</script>
</body>
</html>

3 下拉框选项去重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框选项去重移动练习</title>
</head>
<body>
<table border="1">
    <tr>
        <td>
            <select id="s1" style="width:100px;" size="10" multiple="multiple" >
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
                <option value="4">选项4</option>
                <option value="5">选项5</option>
            </select>
        </td>
        <td align="center">
            <input type="button" value="去除重复" onclick="distinct();"/><br/>
        </td>
        <td>
            <select id="s2" style="width:100px;" size="10" multiple="multiple" >
                <option value="1">选项1</option>
                <option value="3">选项3</option>
                <option value="5">选项5</option>
            </select>
        </td>
    </tr>
</table>
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
  function   distinct(){
      //数组声明：存储选项元素值
      var arr=new Array();
    //获取第二个下拉框选项值并且存到数组中
      //jq数组遍历:each参数  index表示元素下标  item表示数组元素
      $("#s2 > option").each(function (index,item){
          //获取数组元素的值  然后存储到新建的arr中
          arr.push($(item).val())
      })
      //获取第一个下拉框选项
      $("#s1 > option").each(function (index,item){
          //将选项的值和arr中的值做比较
         var res= $.inArray($(item).val(),arr);//查看$(item).val()在arr中的位置有则返回对应的index没有返回-1
          //如果数据是重复的返回值不等于-1
          if(res !=-1){
             //移除当前元素
              $(item).remove();
          }
      })
  }
</script>
</body>
</html>

4 全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选练习</title>
</head>
<body>
请选择你的爱好:<br/>
<input type="checkbox" onchange="checkChange(this)" id="checkAll"/>全选/全不选<br/>
<div>
    <input type="checkbox" name="hobby"/>JAVA&nbsp;
    <input type="checkbox" name="hobby"/>C&nbsp;
    <input type="checkbox" name="hobby"/>Python&nbsp;
    <input type="checkbox" name="hobby"/>Go&nbsp;
</div>

<div>
    <input type="button" id="btn_checkAll" onclick="checkAll(true)" value="全选"/>
    <input type="button" onclick="checkAll(false)" value="全不选"/>
    <input type="button" onclick="checkUnAll()" value="反选"/>
</div>
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
//全选函数
function  checkAll(bol){
   //将爱好的选中属性设置为bol
    $("input[name='hobby']").prop("checked",bol);
}
//全选和全不选切换
function  checkChange(obj){
    $("input[name='hobby']").prop("checked",$(obj).prop("checked"));
}
//反选
function checkUnAll(){
    $("input[name='hobby']").each(function (index,item){
        //将当前复选框状态设置相反的状态
        $(item).prop("checked",!$(item).prop("checked"));
    })
}
</script>
</body>
</html>
泰勒疯狂展开
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Java全栈工程师-jQuery EasyUI
06-22
本课程以案例驱动的方式讲解jQuery EasyUI的使用
java-jquery-form.rar
05-08
java-jquery-form.rar
Java研学-jQuery(一)
zhlyxx的博客
03-18 925
jQuery1.x.js：jQuery 源文件；学习 jQuery 或者 debug 的时候使用。jQuery1.x.min.js：jQuery 压缩之后的文件；正常项目中使用。jQuery 最常用，最简单选择器，通过元素的 id、class 或标签等查找元素。在网页中，每个 id 名称只能使用一次[0, 1]，class 允许重复使用 [0, n]。若想通过 DOM 元素之间的层次关系(DOM结构)来获取特定元素，例如后代元素，子元素， 相邻元素，兄弟元素等，需使用层次选择器。
Java研学-JSON与AJAX
zhlyxx的博客
03-20 855
AJAX 不是一项具体的技术，而是几门技术的综合应用。Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。是一种用于创建快速动态网页的技术。
Java研学-RBAC权限控制(二)
zhlyxx的博客
04-11 554
PageHelper是 MyBatis 的后端分页插件，将写好的 SQL 语句进行分页加工。无需自己去封装以及关心 SQL 分页等问题。默认情况下会使用 PageHelper 方式进行分页，如果想要实现自己的分页逻辑，可以实现 Dialect(com.github.pagehelper.Dialect) 接口，然后配置该属性为实现类的全限定名称，以下参数都是针对默认 dialect 情况下的参数。使用自定义 dialect 实现时，下面的参数没有任何作用。
Java研学-RBAC权限控制(一)
zhlyxx的博客
04-10 1123
Bootstrap是一个流行的前端框架，由Twitter的开发者创建并维护。它是一套用于开发响应式布局、移动设备优先的WEB项目的工具集。Bootstrap提供了大量的HTML和CSS模板，以及一些可选的JavaScript扩展。这些模板和扩展可以帮助开发者快速构建出常见的网页元素和交互功能，比如导航栏、表格、表单、轮播图等。同时，Bootstrap还内置了一些响应式设计的特性，可以确保网页在不同设备上的显示效果都很好。
Java后端学习
YouthExplorer的博客
06-11 895
本人毕业于某211大学计算机科学与技术专业，上岸某985大学计算机专硕。几个月前，在准备考研复试的时候，尝试找一些计算机相关的工作，由于考研的一年时间没有接触相关技术，因此面面失败，受打击太大，遂趁研0之期，决定开启Java后端学习之旅。...............
目前在读学生的Java学习之路
weixin_44362089的博客
09-19 766
回顾学习Java的路程
b站视频-尚硅谷jQuery教程张晓飞老师-笔记
weixin_44286392的博客
07-13 329
b站视频-尚硅谷jQuery教程张晓飞老师-笔记
Java学习路线图完整版（适合零基础自学）_java学习路线大全
2401_84240222的博客
04-28 977
从分库分表原理进行学习、sharding-jdbc实现逻辑、案例及线上环境配置，全方位了解掌握sharding-jdbc这款主流分库分表中间件。java视频教程主流分库分表中间件Sharding-JDBC+Mycat，从原理到配置案例讲解系统掌握。
最新Java学习路线图完整版（适合零基础自学）_java学习路线大全
2401_84281748的博客
05-02 731
SpringCloud框架入门到精通全套教程 java微服务架构基础 史上最简单全面的微服务开发教程本知识点内容旨在深度分析服务之间调用逻辑，从剖析RPC底层原理开始，通过手写RPC框架，掌握RPC实现逻辑。通过全方位介绍微服务RPC框架Dubbo，实现Dubbo在各实战场景中的应用。通过剖析Dubbo源码，掌握Dubbo的服务通信、负载均衡、SPI机制及服务治理的实现逻辑。Dubbo教程，分布式服务框架dubbo源码级应用教程。
Java电商系统+Java学习资料+Java教程第23节+23-jquery对象与dom对象之间相互转化
11-02
Java电商系统+Java学习资料+Java教程第23节+23-jquery对象与dom对象之间相互转化。
JAVA-AJAX-JQUERY
02-18
基于ajax、jquery技术的PPT教程
jquery-1.12.4-jquery.min.js.zip
06-05
jquery-1.12.4.min.js
jdk8新特性----Lambda表达式
w_t_y_y的博客
05-11 407
Java的Lambda表达式是Java 8引入的一个特性，它支持函数式编程，允许将函数作为方法的参数或返回值，从而简化了匿名内部类的使用，并提供了对并行编程的更好支持。
jar包增量更新分析
最新发布
junlaiyan的专栏
05-16 82
借助jdeps分析出jar包的增量文件
java实现拼图小游戏
monkey108的博客
05-16 330
本文主要提供用java实现的拼图小游戏源代码。
CMS垃圾回收器为什么被移除
m0_54187478的博客
05-10 497
由于上述缺点，加上需要将资源投入到更现代垃圾回收器的开发和优化上，Oracle决定从Java 9开始标记CMS为废弃，并在后续版本中完全移除CMS。这些新的收集器旨在提供更低的停顿时间和更高的性能，同时减少配置和维护的复杂性。当它在垃圾收集周期内无法足够快地回收内存时，会退回到一种需要完全暂停所有应用线程的老年代收集模式，这与它设计的初衷相违背。：CMS使用的标记-清除算法会导致较多的内存碎片。：CMS需要更多的CPU资源来执行垃圾回收的并发阶段，而且它在运行时对系统资源的利用也较为激进。
vue-jquery
11-07
vue-jquery是一个Vue.js插件，它将jQuery集成到Vue.js中，使得在Vue.js应用程序中使用jQuery变得更加容易。它提供了一些指令和组件，可以方便地使用jQuery的功能，例如事件处理、动画效果、DOM操作等。同时，它还...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泰勒疯狂展开

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值