jQuery 学习笔记（二）

要点

掌握索引值的获取方法
必须掌握动态设置class的方法
理解链式编程的基本思路
掌握表单相关方法
必须掌握节点的添加删除操作
掌握jQuery的事件委托语法
掌握键盘事件和键码(13)的使用

一、动态设置class的方法

1.1、索引值方法

在JS中，一堆元素的排序是按照索引值来排列的，索引值是从0开始，并且用index来表示.

在JQ中，**index()**是一个方法(函数)，所以必须加括号！用来获取当前元素在父级中的索引值。

语法：

代码举例：

// 原生方法
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
    btns[i].setAttribute("myindex", i);
    btns[i].onclick = function () {
      	console.log(this.getAttribute("myindex"));
    };
}

// JQ index方法
$("button").click(function(){	
  var index = $(this).index();
  console.log(index);
})

索引值可以说是JS里面非常重要的一个组成部分，经常使用于以下几种状况：导航栏、tab栏、焦点图等等功能的实现。

1.2、 addClass与removeClass方法

语法：

// 给某个元素添加类名，理论上，一个标签可以添加无数多个类名，用空格分开
$(selector).addClass(“className1  className2  className3”)

// 给某个元素移除类名
$(selector).removeClass(“className1  className2  className3”)

练习（Tab栏）

提供html与css代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tab栏</title>
    <style type="text/css">
        div,
        span,
        ul,
        li,
        h2,
        body {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .all {
            width: 440px;
            border: 1px solid #000;
            padding: 10px;
            margin: 80px auto;
        }

        .all h2 {
            height: 30px;
            text-align: center;
            display: flex;
            justify-content: space-between;
        }

        .all h2 span {
            width: 100px;
            height: 30px;
            background: #CCC;
            text-align: center;
            cursor: pointer;
        }

        .all h2 span.current {
            background: #FF3366;
        }

        .all ul li {
            display: none;
            background: #FF3366;
            height: 200px;
        }

        .all ul li.current {
            display: block
        }
    </style>
</head>
<body>
    <div class="all">
        <h2>
            <span class="current">新闻</span>
            <span>娱乐</span>
            <span>游戏</span>
            <span>财经</span>
        </h2>
        <ul>
            <li class="current">新闻</li>
            <li>娱乐</li>
            <li>游戏</li>
            <li>财经</li>
        </ul>
    </div>
</body>
</html>

《Tab栏》案例代码：

// 原生方法
var btns = document.getElementsByTagName("span");
var pages = document.getElementsByTagName("li");
for (var i = 0; i < btns.length; i++) {
    btns[i].index = i;
    btns[i].onmouseenter = function () {
        for (var j = 0; j < btns.length; j++) {
            btns[j].className = "";
            pages[j].className = "";
        }
        this.className = "current";
        pages[this.index].className = "current";
    };
}

// JQ方法
$("span").hover(function () {
    var index = $(this).index();
    $(this).addClass("current").siblings().removeClass("current");
    $("li").eq(index).addClass("current").siblings().removeClass("current");
});

1.3、 toggleClass

语法：

// 切换某个元素的类名（添加或删除）
$(selector).toggleClass(“className”)

练习（百度风云榜）

提供html和css代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度风云榜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
        }

        ul {
            padding: 10px;
            margin: 100px auto;
            border: 1px solid #000;
            width: 100px;
        }

        ul>li {
            cursor: pointer;
        }

        span {
            background: url(images/close.gif) no-repeat left center;
            padding-left: 20px;
        }

        span.open {
            background-image: url(images/open.gif);
        }

        ol {
            display: none;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <span>音乐</span>
            <ol>
                <li>你好毒</li>
                <li>该死的温柔</li>
                <li>演员</li>
            </ol>
        </li>
        <li>
            <span>电影</span>
            <ol>
                <li>釜山行</li>
                <li>战狼</li>
                <li>杀破狼</li>
            </ol>
        </li>
        <li>
            <span>小说</span>
            <ol>
                <li>天龙八部</li>
                <li>三生三世</li>
                <li>小时代</li>
            </ol>
        </li>
    </ul>
</body>
</html>

《百度风云榜》案例代码：

$('span').click(function(){
  // 让当前列表切换收放
  $(this).toggleClass('open').siblings('ol').slideToggle();
  // 让其他列表收起
  $(this).parent().siblings().children('ol').slideUp().siblings('span').removeClass('open');
})

// 代码优化：
// 链式编程的原理：每一个方法都会去找最近的一个对象(事件源)
$('span').click(function(){
  $(this).toggleClass('open')// "当前span"
    	 .siblings('ol')// 将事件源"当前span"变成了"当前ol"
          .slideToggle()// "当前ol"
          .parent()// 将"当前ol"变成了"当前父级li"
          .siblings()// 将"当前父级li"变成了"其他父级li"
          .children('ol')// 将"其他父级li"变成了"其他父级的ol"
          .slideUp()// "其他父级的ol"
          .siblings('span')// 将"其他父级的ol"变成了"其他父级的span"
          .removeClass('open');// "其他父级的span"
})

二、表单相关方法

2.1、val获取表单中的值

获取input 或 textarea 的值我们可以通过以下方式获取：

// ()内部写入文本可以实现修改功能
$('input').val()
$('textarea').val()

获取select下拉框的值

<select id="selectBrowser">
    <option value="1">pc</option>
    <option value="2">phone</option>
    <option value="3">pad</option>
</select>
<script>
    $("#selectBrowser").change(function(){
        console.log($(this).val());
    })
</script>

2.2、trim去除前后空格

表单输入时去除前后空格，我们可以用：

$.trim()

代码示例：

// 通常来说提交表单时，输入框的值是不允许为空的，并且包括空格，这样的数据是无意义的，此时需要做校验，提示用户重新输入
var val = $('input').val();
if( $.trim(val)=="" ){
  	alert('请重新输入');
}

三、节点控制

3.1、什么是节点

关于节点，其实在body里面，任何标签、文字、图片、空格、换行等都是节点，既然是节点，就拥有增、删、改、查这几个功能。

节点node	nodeType	nodeName	nodeValue
元素节点	1	标签名（大写）	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容
CDATA节点	4	#cdata-section	CDATA区域内容
实体引用名称节点	5	引用名称	null
实体名称节点	6	实体名称	null
处理指令节点	7	target	entire content cluding the target
注释节点	8	#comment	注释内容
文档节点	9	#document	null
文档类型节点	10	doctype的名称	null
文档片段节点	11	#document-fragment	null
DTD声明节点	12	符号名称	null

3.2、增加子节点（重点）

语法：

// 在某个元素的子级中，往后面添加节点
$(element).append('子节点')
// 在某个元素的子级中，往前面添加节点
$(element).prepend('子节点')

代码举例：

<input type="text">
  <button class="before">往前添加</button>
<button class="after">往后添加</button>
<ul>
  <li>我本来就存在</li>
</ul>

<script>
  // 点击增加一个li标签在ul的最前
  $('.before').click(function(){
    var val = $.trim($('input').val());
    if(val)$('ul').prepend('<li>'+val+'</li>');
    $('input').val("");
  })

  // 点击增加一个li标签在ul的最后
  $('.after').click(function(){
    var val = $.trim($('input').val());
    if(val)$('ul').append('<li>'+val+'</li>');
    $('input').val("");
  })
</script>

3.3、增加同级节点（重点）

语法：

// 在element之前添加兄弟节点
$(element).before('兄弟节点') 
// 在element之后添加兄弟节点
$(element).after('兄弟节点')

代码举例：

<button>兄弟前添加</button>
<button>兄弟后添加</button>
<div>
  <p class="brother"></p>
</div>

<script>
  // 点击增加一个标签在p.brother之前
  $('button').eq(0).click(function(){
    $('.brother').before('<p>我是前p</p>');
  })

  // 点击增加一个标签在p.brother之后
  $('button').eq(1).click(function(){
    $('.brother').after('<p>我是后p</p>');
  })
</script>

3.4、节点的删除（重点）

语法：

// 将element节点中的子级节点包括内容清空
$(element).empty();
// 删除element节点包括内容
$(element).remove();

代码举例：

$('button').eq(0).click(function(){
  $('ul').empty();  // 清空ul中的内容
})

$('button').eq(1).click(function(){
  $('ul').remove(); // 直接删除ul
})

3.5、节点的替换

语法：

// 用后者替代前者
$(element1).replaceWith(element2);

代码举例：

$('button').click(function(){
    // p替代li
    $('li').eq(1).replaceWith(`<p>这是个p标签</p>`);
})

四、事件委托

定义：

事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

为什么使用事件委托：

考虑一个ul，在li的数量非常少的时候，为每一个li添加事件当然会使用for循环；但是数量多的时候这样做太浪费内存，长到上百上千上万的时候，为每个li添加事件就会对页面性能产生很大的影响。
给一个ul里面的几个li添加了事件但是如果动态又生成了li则刚生成的li不具备事件这时就需要用到委托。

事件委托的作用：

性能要好（为多个相同元素绑定事件）
针对新创建的元素，直接可以拥有事件（为不存在的元素绑定事件）

语法：

// 事件和函数是必填的，子级选择器选填（不填就是普通事件绑定）
$(selector).on(事件,children,function(e){...})

代码举例：

// 1ms之后再添加一下li元素
setTimeout(function () {
  	$('ul').append('<li>6</li>')
}, 1)
// 普通事件绑定（办不到）
// $('li').click(function(){
//     var index=$(this).index()+1
//     console.log(index);
// })
// 事件委托（重点）
$('ul').on('click', 'li', function () {
    var index = $(this).index() + 1
    // 此时this指向的是‘li’
    console.log(this, index);
})

// 事件解绑
$('ul').click(function(){
    console.log(111);
})
$("button").click(function(){
    $('ul').off('click', 'li')
})

// 另一种诡异写法（JQ项目很多这样的写法）
setTimeout(function () {
  	$('ul').append('<li οnclick="getIndex(this)">6</li>')
}, 1)
function getIndex(myThis){
    var index=$(myThis).index()+1
    console.log(index);
}

五、键盘事件和键码

5.1、键盘事件

我们已经讲过了很多鼠标事件，可以直接使用

$(selector).事件(function(){...});

，接下来我们来学习键盘事件，用法也是类似的：

$(selector).keydown(function(){...});// 键盘按下事件
$(selector).keyup(function(){...});// 键盘松开事件

5.2、键码

e.keyCode – 键码

这里提供一张键码表，但并不需要专门去记住：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nm8WpX6f-1628046221788)(.\images\keycode.png)]

六、作业：微博发布

项目链接：http://codesohigh.com/weibo/

请完成以下效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sdkdy4ad-1628046221791)(.\images\homework3.gif)]

思路提示：

聚焦(focus)、失焦(blur) 事件设置边框的颜色
输入事件（建议使用keyup）要判断 “发布” 按钮是否可点击（样式和实际flag）
聚焦事件也需要判断“发布” 按钮是否可点击（可以封装成函数）
通过keyCode可以判断回车(13或enter)，可以进行发布操作（将发布功能封装成函数）
点击"发布"按钮，可以直接掉用发布方法
点击删除的效果，使用jq的事件委托

提供html+css代码（动画不做要求，主要完成功能）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博发布</title>
    <style>
        *{margin: 0;padding: 0;border: 0;list-style: none;}
        body{background: #efefef;}
        section{overflow: hidden;width: 800px;padding: 10px;background: #fff;margin: 100px auto 20px;}
        h4{color: #426c81;font-weight: normal;}
        textarea{width: 100%;resize: none;border: 1px solid #ccc;outline: none;margin-top: 10px;margin-bottom: 10px;height: 70px;}
        div{width: 90px;height: 30px;line-height: 30px;text-align: center;background: #ff8140;color: #fff;border-radius: 6px;float: right;opacity: 0.8;cursor: not-allowed;}
        ul{width: 800px;padding: 10px;background: #fff;margin: 0 auto;overflow: hidden;}
        li{border-bottom: 1px dashed #ccc;line-height: 30px;height: 30px;margin-top: 5px;display: flex;justify-content: space-between;align-items: center;padding: 0 10px;width: 100%;box-sizing: border-box;}
        p{width: 95%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
        span{cursor: pointer;width: 20px;height: 20px;text-align: center;line-height: 20px;background: #ccc;border-radius: 3px;}
        textarea.active{border-color: #ff8140;}
        div.active{opacity: 1;cursor: pointer;}
    </style>
</head>
<body>
    <section>
        <h4>有什么新鲜事想告诉大家?</h4>
        <textarea></textarea>
        <div>发布</div>
    </section>
    <ul>
        <!-- <li>
            <p></p>
            <span>x</span>
        </li> -->
    </ul>
</body>
</html>

jQuery 学习笔记（二）

要点

一、动态设置class的方法

1.1、索引值方法

1.2、 addClass与removeClass方法

练习（Tab栏）

1.3、 toggleClass

练习（百度风云榜）

二、表单相关方法

2.1、val获取表单中的值

2.2、trim去除前后空格

三、节点控制

3.1、什么是节点

3.2、增加子节点（重点）

3.3、增加同级节点（重点）

3.4、节点的删除（重点）

3.5、节点的替换

四、事件委托

五、键盘事件和键码

5.1、键盘事件

5.2、键码

六、作业：微博发布

思路提示：

继续阅读

用jQuery实现一个简易的聊天框

使用canvas制作简易的数据结构核心算法演示系统——线性表(三)——头插法

Jquery 拖动窗口

用js实现的一个加载中状态的动态效果

jquery实现复制到剪贴板通用

Jquery 实现复制到剪贴板

ZeroClipboard2.2.0版本跨浏览器复制（兼解决IE下兼容问题）

推荐一些有用的网站一键分享制作网站小图标插件网站seo 相关的网站地图 api二维码相关

jQuery实现Ajax通讯的几种常用方式

jqGrid的使用笔记：5. 事件

jQuery实现百度搜索框

2010年终总结--技术篇

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序

JQuery--dom捕获html元素

jquery_126_demo