【JQuery】关键点总结

最新推荐文章于 2024-07-03 19:41:47 发布

星空•物语

最新推荐文章于 2024-07-03 19:41:47 发布

阅读量165

点赞数

分类专栏： # JavaWeb 文章标签： jquery dom html

本文链接：https://blog.csdn.net/qq_40265247/article/details/105321949

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JQuery速查手册

<head>
    <meta charset="UTF-8">
    <title>OCR</title>
    <script src="https://code.jquery.com/jquery-3.4.0.js"></script>  <!--第一次使用在该行ALT+ENTER下载-->
    <script>
    $(function () {
    	$("#btn1").click(function(){   //选择器筛选对结果添加事件及对应的响应函数
    	...
    	})
      ...
    })
    </script>
</head>

划重点：

DOM 对象与jQuery 对象相互转换
DOM 对象->jQuery 对象: 使用 $() 进行包装
jQuery 对象-> DOM 对象：数组索引
选取子元素, 需要在选择器中间添加一个空格.

$("div.one :first-child").css("background", "#ffaacc");      //选择类为one的div标签下的第一个child   .css()为风格设置

jQuery 对象数组each遍历, 在 each 内部的 this 是正在得到的 DOM 对象, 而不是一个 jQuery 对象

$("select :selected").each(function(){
   alert(this.value);
});

节点操作（参考示例1

//1. 操作文本节点: 通过 jQuery 对象的 text() 方法
alert($("#bj").text());   // 访问文本
$("#bj").text("尚硅谷");  //替换文本

//2. 操作属性节点: 通过 jQuery 对象的 attr() 方法. 
//注: 直接操作 value 属性值可以使用更便捷的 val() 方法. PS选择器结果是多元素数组，该方法只能获取第一个被选择的值
alert($(":text[name='username']").attr("value")); 
$(":text[name='username']").attr("value", "尚硅谷");

clone(true): 在克隆节点的同时, 克隆节点包含的事件.

$("#bj").clone(true)
        .attr("id", "bj2")  //id属性作为唯一标识，记得要更改下
        .insertAfter($("#rl"));

补充：节点互换需要先克隆节点.

var $bj2 = $("#bj").clone(true);  //这儿有个小困惑，要clone先出现的元素
var $rl = $("#rl").replaceWith($bj2);  //移动$bj2至新位置，并返回被替换的元素（似乎事件丢失了
$("#bj").replaceWith($rl);

同 JS 的响应函数一样, jQuery 对象的响应函数若返回 false, //可以取消指定元素的默认行为跳转. 比如 submit, a 等
选择器是一步一步筛选的，如$(“li:gt(5):lt(10)”);此时的 lt 是在 li:gt(5) 筛选结果基础上进行的.

示例1：表单元素显示内容获取与更改：val()操作


<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>ex1</title>
      <script src="https://code.jquery.com/jquery-3.4.0.js"></script>
      <script type="text/javascript">
      
         $(function(){
            //1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数
            $(":text").focus(function(){
               //2. 当获取焦点时, 若 #address 中是默认值
               //(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 ""
               var val = $(this).val();
               
               if(val == this.defaultValue){
                  $(this).val("");
               }
            }).blur(function(){
               //3. 失去焦点是, 若 #address 的值在去除前后空格后等于 ""
               //则为其恢复默认值. 
               var val = this.value;  
               if($.trim(val) == ""){
                  this.value = this.defaultValue;
               }
            });

            $(":button:eq(1)").click(function(){
               $("#single").val("选择3号");
            });
            $(":button:eq(2)").click(function(){
               $("#multiple").val(["选择2号", "选择4号"]);           
            });
            $(":button:eq(3)").click(function(){
               $(":checkbox[name='c']").val(["check2", "check4"]);
            });
            $(":button:eq(4)").click(function(){
               //即便是为一组 radio 赋值, val 参数中也应该使用数组.  使用一个值不起作用。 
               $(":radio[name='r']").val(["radio2"]);
            });
            $(":button:eq(5)").click(function(){
               //val() 可以直接获取 select 的被选择的值. 
               alert($("#single").val());
               alert($("#multiple").val());
               
               //val 不能直接获取 checkbox 被选择的值.若直接获取, 只能得到第一个被选择的值. 
               //若希望打印被选择的所有制, 需要使用 each 遍历. 
               $(":checkbox[name='c']:checked").each(function(){
                  alert(this.value);
               });
               
               //而 raido 被选择的只有一个, 所以可以直接使用 val() 方法. 
               alert($(":radio[name='r']:checked").val());
            });
            
         })
      
      </script>
   </head>
   <body>
      <input type="text" id="address" value="请输入邮箱地址"><br> 
      <input type="text" id="password" value="请输入邮箱密码"><br>
      <input type="button" value="登录">
      
      <br><br><br>
      
      <input type="button" value="使单选下拉框的'选择3号'被选中"/>
      <input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
      <input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
      <input type="button" value="使单选框的'单选2'被选中"/><br>
      <input type="button" value="打印已经被选中的值"><br>
 
      <br/>
      
      <select id="single">
        <option>选择1号</option>
        <option>选择2号</option>
        <option>选择3号</option>
      </select>
      
      <select id="multiple" multiple="multiple" style="height:120px;">
        <option selected="selected">选择1号</option>
        <option>选择2号</option>
        <option>选择3号</option>
        <option>选择4号</option>
        <option selected="selected">选择5号</option>
      </select>
      
      <br/><br/>

      <input type="checkbox" name="c" value="check1"/> 多选1
      <input type="checkbox" name="c" value="check2"/> 多选2
      <input type="checkbox" name="c" value="check3"/> 多选3
      <input type="checkbox" name="c" value="check4"/> 多选4
      
      <br/>
      
      <input type="radio" name="r" value="radio1"/> 单选1
      <input type="radio" name="r"  value="radio2"/> 单选2
      <input type="radio" name="r"  value="radio3"/> 单选3

   </body>
</html>

示例2：在这里插入图片描述

$(function(){
 
 //1. jQuery 对象调用 jQuery 提供的方法的返回值如果是一个对象的话，那么这个对象一定是一个 jQuery 对象
 function removeTr(aNoe){
    //获取 a 节点所在的的 tr 节点. 返回时是 jQuery 对象
    var $trNode = $(aNoe).parent().parent();
    var textContent = $trNode.find("td:first").text(); //find() 方法: 查找子节点   只有直接包含的标签节点才能get文本节点内容
    textContent = $.trim(textContent);
    
    var flag = confirm("确定要删除" + textContent + "的信息吗?");
    if(flag){
       $trNode.remove();
    }
    //return false; //这个有误取决于调用时false的return方式
 }
 
 $("#employeetable a").click(function(){
   //点击含链接或submit的事件中一定得return false,否则网页就飞了     
    removeTr(this); 
    return false;  //若自定义函数最终返回false，同return removeTr(this);
 });
 
 $("#addEmpButton").click(function(){
    $("<tr></tr>").append("<td>" + $("#name").val() + "</td>")
                  .append("<td>" + $("#email").val() + "</td>")
                  .append("<td>" + $("#salary").val() + "</td>")
                  .append("<td><a href='deleteEmp?id=xxx'>Delete</a></td>")
                  .appendTo("#employeetable tbody")
                  .find("a")
                     .click(function(){
                        removeTr(this); 
    			return false;  //若自定义函数最终返回false，同return removeTr(this);
                     });
 });
 
})

星空•物语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JQuery】关键点总结

JQuery速查手册<head> <meta charset="UTF-8"> <title>OCR</title> <script src="https://code.jquery.com/jquery-3.4.0.js"></script> <!--第一次使用在该行ALT+ENTER下载-...
复制链接

扫一扫