day56 文件 文档处理,事件

 

 

前情回顾:

1. 前情回顾

    0. 选择器补充
        - 属性选择器
            - $("[egon]")
            - $("[type='text']")
            - $("input[type!='submit']")

    1. 筛选器
        1. 表单筛选器
            :text
            :password
            :...
            
            :enable
            :disable
            
            :checked
            :selected
            
        2. 筛选方法
            $("").first()
            .last()
            
            prev()
            prevAll()
            prevUntil(终止条件)   不包含
            
            next()
            nextAll()
            nextUntil(终止条件)   不包含
            
            parent()
            parents()
            parentsUntil(终止条件) 不包含
            
            .children()
            
            .siblings()
            
            $("").find() 
            
    2. 样式操作
        1. $("").css("color", "red")  --> .css({"color": "red", "border": "1px solid black"})
        
        2.  addClass()
            removeClass()
            toggleClass()
            hasClass()
        3. 位置
            - offset()  获取或设置相对当前窗口的偏移
            - position()
            
            - scrollTop()  返回顶部示例
            -scrollLeft()
        4. 尺寸
            CSS盒子模型
            
            height()
            innerHeight()
            outerHeight()
            
            width()
            innerWidth()
            outerWidth()
    3. 属性操作
        1. attr() --> 获取ID,type等和自定义属性
        2. prop() --> checkbox和radio
        3. val()  --> input 、多选的select
        
    4. 文本操作
        text()
        html()
        
View Code

 

今日内容概要:

0. 作业讲解
        - each循环
            1. $.each()
            2. $("").each()
            
            - 注意:this具体指的是谁(进入循环的当前对象)
            - return false 后面的时间或函数不执行
            - 如果一个jQuery查找的对象被多次用到,我们可以用变量把它保存起来,减少重复查找
            
    1. 文档操作
        各种插入
        1. 内部插入 (子标签)
            往前插 prepend
            往后插 append
        2. 外部插入 (同级)
            往后插 after
            往前插 before
        3. 替换
            A.replaceWith(B)  --> B替换A
            A.replaceAll(B)   --> A替换所有的B
        4. 克隆
            注意参数:true,加上true表示标签和事件都复制
    
    2. 常用事件和事件绑定
        按键按下事件 --> 批量操作
        
        .on()
        
        事件委托
            原理:利用事件冒泡--> 父标签捕获事件->处理事件
            $("已经存在的标签").on("事件", "选择器", function(){...})
    
    3. 动画效果
        - 基本
        - 淡入
        - 滑动
        - 自定义
View Code

 

 

 

each,

在jQuery里面我们用each循环,就像我们的python里面有for循环和while循环一样的,

举例:

<script>

var a=[q,w,r,t,x];

$.each(a,function (i,v){    //这里我们的function里面的参数,一个i就是我们的索引值

console.log(i,v);   //而v就是for i in a里面的i,也就是一个变量代指a数组中的每一个元素

if (v===r){   //这里是当遍历数组的元素的时候遇到这个r元素,我们就终止循环

return false;   //这里就是终止元素,就相当于python里面的break 所以我们用return false来终止或者提前结束each循环

}

})

</script>

 

 

var a=[1,2,3,4,5,6]

$.each(a,function(i,v){

if (v===4){

retrun

}

console.log(i,v);

})

输入的结果是:

0,1

1,2

2,3

4,5

5,6

我们由上示例可得到结果就是我们在jQuery里面也可以有continue的用法,上面有一个break用法就是在return的时候用一个false,我们这里把false去掉,或者替换成true,name就达到了continue的效果了

有图更清晰:

 

 

事件:

jQuery 事件处理方法是jQuery中的核心函数.

所谓的时间处理程序是指的HTML中发生事件时所使用的方法.

事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件.

常用的方法不多,这里是比较全面的官网给出的事件简介:

http://www.w3school.com.cn/jquery/jquery_ref_events.asp

 

常用事件

blur()   触发,或将函数绑定到指定元素的添加/触发失去焦点事件

click()  添加/触发click事件

hover()  鼠标的光标移动到该指定元素会发生变化,(例如:颜色变化,透明度变化,或者字体变化,或者下划线变化等)==========>官方说法:光标悬停事件

focus()  添加触发focus事件   当元素获得焦点时,放生focus事件,当通过鼠标点击选中元素或通过tab键定位到元素时,该元素就会获得焦点.

change()  触发change事件

keyup()  这个事件,就是按住键盘按键弹起的时候

keydown()  该事件是按住键盘按键按下去的动作,

keypress()  该事件是按过的键盘按键.

 

简单的事件绑定:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>file-replace</title>
</head>
<body>
<button id="b1">click me</button>
<select name="" id="s1">
    <option value="1">晓风干</option>
    <option value="2">泪痕残</option>
    <option value="3">人称各</option>
</select>
<script src="jquery-3.2.1.min.js"></script>
<script>
//    $("#b1").click(function(){
//     alert(123);
//     });
//    $("#b1").on("click",function(){
//        alert(798);
//    });
//鼠标移上去触发事件
    $("#b1").hover(function(){
        alert(798);
    });
    //change
    $("#s1").change(function(){
        alert("人情薄,世情恶,");
    });
    //按键事件
    //keydown按下
    //keyup抬起
    //keypress按一下
    $(window).keydown(function(){
        alert(event.keyCode);
    })
</script>
</body>
</html>
View Code

 

事件的绑定不都是用on,来进行操作的,如上图所示

 

事件举例:

按住键盘shift键进行批量操作:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>键盘事件示例</title>
</head>
<body>

<table border="1">
  <thead>
  <tr>
    <th>#</th>
    <th>姓名</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>Egon</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Alex</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Yuan</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>EvaJ</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Gold</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  </tbody>
</table>

<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">

<script src="jquery-3.2.1.min.js"></script>
<script>
  // 全选
  $("#b1").on("click", function () {
    $(":checkbox").prop("checked", true);
  });
  // 取消
  $("#b2").on("click", function () {
    $(":checkbox").prop("checked", false);
  });
  // 反选
  $("#b3").on("click", function () {
    $(":checkbox").each(function () {
      var flag = $(this).prop("checked");
      $(this).prop("checked", !flag);
    })
  });
  // 按住shift键,批量操作
  // 定义全局变量
  var flag = false;
  // 全局事件,监听键盘shift按键是否被按下
  $(window).on("keydown", function (e) {
//    alert(e.keyCode);
    if (e.keyCode === 16){
      flag = true;
    }
  });
  // 全局事件,shift按键抬起时将全局变量置为false
  $(window).on("keyup", function (e) {
    if (e.keyCode === 16){
      flag = false;
    }
  });
  // select绑定change事件
  $("table select").on("change", function () {
    // 是否为批量操作模式
    if (flag) {
      var selectValue = $(this).val();
      // 找到所有被选中的那一行的select,选中指定值
      $("input:checked").parent().parent().find("select").val(selectValue);
    }
  })
</script>
</body>
</html>

按住shift键批量操作
View Code

 

我们的事件处理方法都尽量放到事件函数里面来,然后单独存放于一个js文件里面,

这样便于日后根据程序需求来进行调整,实现了功能解耦.

以下是官网给出的建议:

  • 把所有 jQuery 代码置于事件处理函数中
  • 把所有事件处理函数置于文档就绪事件处理器中
  • 把 jQuery 代码置于单独的 .js 文件中
  • 如果存在名称冲突,则重命名 jQuery 库

 

事件绑定:

events:事件

selector:选择器

function:事件处理函数

 

页面载入:

我们的web页面在你使用操作系统里面的浏览器输入网址时,都希望尽快得到页面效果,而不是一直处于空白页面,等待加载中,这样会大大降低用户体验,所以我们的页面会有一个ready方法,这个方法是

让我们的页面在加载的过程中先加载用户能直观感受到的信息,然后再加载后台的信息.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>登录注册示例</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>

<form id="myForm">
  <label for="name">姓名</label>
  <input type="text" id="name">
  <span class="error"></span>
  <label for="passwd">密码</label>
  <input type="password" id="passwd">
  <span class="error"></span>
  <input type="submit" id="modal-submit" value="登录">
</form>

<script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script>
  function myValidation() {
    // 多次用到的jQuery对象存储到一个变量,避免重复查询文档树
    var $myForm = $("#myForm");
    $myForm.find(":submit").on("click", function () {
      // 定义一个标志位,记录表单填写是否正常
      var flag = true;
      $myForm.find(":text, :password").each(function () {
        var val = $(this).val();
        if (val.length <= 0 ){
          var labelName = $(this).prev("label").text();
          $(this).next("span").text(labelName + "不能为空");
          flag = false;
        }
      });
      // 表单填写有误就会返回false,阻止submit按钮默认的提交表单事件
      return flag;
    });
    // input输入框获取焦点后移除之前的错误提示信息
    $myForm.find("input[type!='submit']").on("focus", function () {
      $(this).next(".error").text("");
    })
  }
  // 文档树就绪后执行
  $(document).ready(function () {
    myValidation();
  });
</script>
</body>
</html>

登录校验示例
View Code

 

事件委托:

原理:利用事件冒泡--->父标签捕获事件-->处理事件

$("已经存在的标签").on("事件","选择器",function(){ ...........})

 

个人总结关于jQuery核心内容原理

所以我们就是需要通过jQuery里面的选择器的方法到HTML文档中找到那个需要绑定事件的标签,然后我们通过事件来绑定它,根据事件里面提供的那些方法去跟标签绑定,用函数去实现效果,所以我们这里的事件是方法,而我们的选择器是帮助我们找到使用该方法的那个具体的对象.

 

 

 

 

动画效果:

基本

show()

hide()

toggle()

滑动

slideDown()

slideUp()

slideToggle()

淡入淡出

fadeIn()

fadeOut()

fadeTo()

fadeToggle()

自定义

animate()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果示例</title>
</head>
<body>

<img style="position: relative" id="i1" width="300" src="http://www.iyi8.com/uploadfile/2015/1024/20151024114500805.jpg" alt="我前女友">
<button id="b1">再见</button>
<button id="b2">再见x2</button>
<button id="b3">往左</button>
<button id="b4">往右</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
    $("#b1").on("click", function () {
        $("#i1").toggle(3000);
    });
    $("#b2").on("click", function () {
        $("#i1").fadeToggle(3000);
    });
     $("#b3").on("click", function () {
        $("#i1").animate({
            "right": "+50px"
        }, 3000)
    });
     $("#b4").on("click", function () {
        $("#i1").animate({
            "right": "-50px"
        }, 3000)
    })
</script>
</body>
</html>
View Code

 

重点理解一下opacity这个用法,里面都加的有注释:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;  /*这里如果设置成0,那么我们的点赞的那个图标就不会显示了,就直接透明了*/
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0  //这里如果设置成了1那么就会一直显示着点赞的图标,不会淡出
    }, 1000)
  })
</script>
</body>
</html>
View Code

 

 

文档处理:

各种插入:

1,内部插入(子标签)  站在我当前标签的位置上看,往内部插入就是往我的子代标签里面插入,因为我是父标签,他们都在我里面,也就是内部,就像我们的袋鼠,袋鼠的宝宝都是在父代袋鼠的肚兜里面的,这样联想就能够理解我们的内部插入就是往子标签插入了

添加到指定元素的内部前面,prepend ====$(A).prepend(B)      //把B前置到A

        =====$(A)/prependTo(B)            //把A前置到B

 

添加到指定元素的内部的后面, append  ===$(A).append(B)              //把B追加到A

         ===$(A).appendTo(B)         //把A追加到B

2,外部插入(同级)  站在我当前标签的位置上,我的外部就是我的前面我的后面,跟我同级的标签,跟袋鼠的联想做对比,

添加到指定元素外部的后面 after  ====$(A).after(B)        //把B放到A的后面

       =====$(A).insertAfter(B)         //把A放到B的后面

添加到指定元素外部的前面 before====$(A).before(B)       //把B放到A的前面

      ====$(A).insertBefore(B)      //把A放到B的前面

各种插入示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <style>
        #d1{
            background-color: blueviolet;
        }

    </style>
</head>
<body>

<ul id="u1">
    <li>1</li>
</ul>

<p id="p1">p1</p>

<div id="d1">
    <div>
        <span>1</span><span>2</span>
    </div>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    var liEle=document.createElement("li");
    //往后插入内容
    $(liEle).text("2");
    $("ul").append(liEle);
    $(liEle).appendTo($("ul"));

    //往前插
    $(liEle).text("0");
    $("ul").prepend(liEle);
    $(liEle).prependTo($("#u1"));

    //外部插入,后面
    var pEle=document.createElement("p");
    往后插 (同级)
    $(pEle).text("p2");
    $("#p1").after(pEle);

    //往前插(同级)
    s(pEle).text("p0");
    $("#p1").before(pEle);
    $(pEle).insertBefore($("#p1"));

</script>
</body>
</html>
View Code

 

移除和清空元素

remove() // 从DOM中删除所有匹配的元素

empty() //  删除匹配的元素集合中所有的子节点.

就好比我有一个盒子,里面放满了电影票根,我要清空这个盒子用作他用,那么这个时候就是用到empty

而我不想要这个盒子了,连同里面的电影票根都不要了,那么我们就需要用到remove

 

3,替换

A.replaceWith(B)  ----B替换A

A.replaceAll(B)  -----A替换所有的B

 

 如下图以及文档所示,图片把文档中的重点凸显出来了:

可以改变标签,以及标签里面的内容,达到替换的效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>file-example</title>
</head>
<body>

<button id="b1">新增</button>
<table border="1" id="t1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
     <tr>
        <td>1</td>
        <td>Egon</td>
        <td>杠娘</td>
        <td>
            <input type="button" value="编辑">
            <input class="delete" type="button" value="删除">
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Alex</td>
        <td>吹牛逼</td>
        <td>
            <input type="button" value="编辑">
            <input class="delete" type="button" value="删除">
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>Yuan</td>
        <td>日天</td>
        <td>
            <input type="button" value="编辑">
            <input class="delete" type="button" value="删除">
        </td>
    </tr>
    </tbody>
</table>




//这里是重点!!!!!!!!!!!!!!!!!!!!!
<div id="po">1</div>
<div id="pi">2</div>
<script src="jquery-3.2.1.min.js"></script>


//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

//这才是重点!!!!!!!!!!!!!!!!!!!!!!!

<script>
    var pEle=document.createElement("p");
    $(pEle).text("世情薄,人情恶");
    //  $("div").replaceWith(pEle);
    $(pEle).replaceAll($("div"));
</script>


//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


<script>
    $("#b1").on("click",function(){
        //新增一条数据
        var trEle=document.createElement("tr");
        $(trEle).html("<td>4</td> <td>gold</td> <td>drive</td> <td> <input type='button' value='change'> <input type='button' value='删除'> </td>")
        //
        $("tbody").append(trEle);
    });

    //普通绑定事件的方式  这样写会报错,已经试过了,会把整个页面都删除掉,而不仅仅是当前行
//    $(".delete").on("click",function(){
//        this  当前点击的标签
        // 删除当前行
//        $(this).parent().parent().remove();
//    });
    //事件委托方式
    $("tbody").on("click","delete",function(){  //这里是用到了冒泡事件,为了拯救上面的问题,我们使用了父级标签来绑定事件
        //找到了tbody然后再从父级标签里面去找到他的delete标签,从父辈里面去找就可以得到这个想要的结果,
        // 那么我们可以从这里着手开始写表单的终极jQuery版本
        //this当前点击的标签
        //删除当前行
        $(this).parent().parent().remove();
    })
</script>
</body>
</html>
View Code

 

4.克隆

参数(true),加上了true参数,表示标签和事件都复制

请在示例中留意true参数用法

克隆代码示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>克隆</title>
  <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龙宝刀,点击就送</button>
<hr>
<button id="b2">屠龙宝刀,点击就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加参数true,克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加参数true,克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>

点击复制按钮
View Code

 

posted @ 2018-01-04 15:55  dream-子皿  阅读(88)  评论(0编辑  收藏