一文入门 jQuery

语言: CN / TW / HK

时间 2022-09-25 16:22:05 InfoQ

jQuery 概念

一个 JavaScript 框架。简化 JS 开发。 jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（或 JavaScript 框架）。jQuery 设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。 JavaScript 框架 ：本质上就是一些 js 文件，封装了 js 的原生代码而已。

快速入门

步骤：

下载 JQuery

目前 jQuery 有三个大版本：1.x：兼容 ie678,使用最为广泛的，官方只做 BUG 维护，功能不再新增。因此一般项目来说，使用 1.x 版本就可以了，最终版本：1.12.4 (2016 年 5 月 20 日)2.x：不兼容 ie678，很少有人使用，官方只做 BUG 维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用 2.x，最终版本：2.2.4 (2016 年 5 月 20 日)3.x：不兼容 ie678，只支持最新的浏览器。除非特殊要求，一般不会使用 3.x 版本的，很多老的 jQuery 插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017 年 3 月 20 日）
jquery-xxx.js 与 jquery-xxx.min.js 区别：
jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

导入 JQuery 的 js 文件：导入 min.js 文件
使用 var div1 = $("#div1");alert(div1.html());

JQuery 对象和 JS 对象区别与转换

JQuery 对象在操作时，更加方便。
JQuery 对象和 js 对象方法不通用的.
两者相互转换

jq -- > js : jq 对象[索引] 或者 jq 对象.get(索引)
js -- > jq : $(js 对象)

选择器：筛选具有相似特征的元素(标签)

基本操作学习

事件绑定

//1.获取b1按钮$("#b1").click(function(){  alert("abc");});

复制代码

入口函数

$(function () {
});

复制代码

window.onload 和 $(function) 区别

window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉。(function)可以定义多次的。

样式控制：css 方法

// $("#div1").css("background-color","red");$("#div1").css("backgroundColor","pink");

复制代码

DOM 操作

内容操作

html(): 获取/设置元素的标签体内容内容 --> 内容
text(): 获取/设置元素的标签体纯文本内容内容 --> 内容
val()：获取/设置元素的 value 属性值

属性操作

通用属性操作

attr(): 获取/设置元素的属性
removeAttr():删除属性
prop():获取/设置元素的属性
removeProp():删除属性

attr 和 prop 区别？
如果操作的是元素的固有属性，则建议使用 prop
如果操作的是元素自定义的属性，则建议使用 attr

对 class 属性操作

addClass():添加 class 属性值
removeClass():删除 class 属性值
toggleClass():切换 class 属性
toggleClass("one"):
判断如果元素对象上存在 class="one"，则将属性值 one 删除掉。如果元素对象上不存在 class="one"，则添加
css():

CRUD 操作:

append():父元素将子元素追加到末尾

对象 1.append(对象 2): 将对象 2 添加到对象 1 元素内部，并且在末尾

prepend():父元素将子元素追加到开头

对象 1.prepend(对象 2):将对象 2 添加到对象 1 元素内部，并且在开头

appendTo():

对象 1.appendTo(对象 2):将对象 1 添加到对象 2 内部，并且在末尾

prependTo()：

对象 1.prependTo(对象 2):将对象 1 添加到对象 2 内部，并且在开头

after():添加元素到元素后边

对象 1.after(对象 2)：将对象 2 添加到对象 1 后边。对象 1 和对象 2 是兄弟关系

before():添加元素到元素前边

对象 1.before(对象 2)：将对象 2 添加到对象 1 前边。对象 1 和对象 2 是兄弟关系

insertAfter()

对象 1.insertAfter(对象 2)：将对象 2 添加到对象 1 后边。对象 1 和对象 2 是兄弟关系

insertBefore()

对象 1.insertBefore(对象 2)：将对象 2 添加到对象 1 前边。对象 1 和对象 2 是兄弟关系

remove():移除元素

对象.remove():将对象删除掉

empty():清空元素的所有后代元素。

对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

案例

全选和全不选

代码如下：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <script  src="../../js/jquery-3.3.1.min.js"></script>    <script>      //分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可
            function selectAll(obj){                //获取下边的复选框        $(".itemSelect").prop("checked",obj.checked);            }
    </script>  </head>  <body>    <table id="tab1" border="1" width="800" align="center" >      <tr>        <td colspan="5"><input type="button" value="删除"></td>      </tr>      <tr>        <th><input type="checkbox" onclick="selectAll(this)" ></th>        <th>分类ID</th>        <th>分类名称</th>        <th>分类描述</th>        <th>操作</th>      </tr>      <tr>        <td><input type="checkbox" class="itemSelect"></td>        <td>1</td>        <td>手机数码</td>        <td>手机数码类商品</td>        <td><a href="">修改</a>|<a href="">删除</a></td>      </tr>      <tr>        <td><input type="checkbox" class="itemSelect"></td>        <td>2</td>        <td>电脑办公</td>        <td>电脑办公类商品</td>        <td><a href="">修改</a>|<a href="">删除</a></td>      </tr>      <tr>        <td><input type="checkbox" class="itemSelect"></td>        <td>3</td>        <td>鞋靴箱包</td>        <td>鞋靴箱包类商品</td>        <td><a href="">修改</a>|<a href="">删除</a></td>      </tr>      <tr>        <td><input type="checkbox" class="itemSelect"></td>        <td>4</td>        <td>家居饰品</td>        <td>家居饰品类商品</td>        <td><a href="">修改</a>|<a href="">删除</a></td>      </tr>    </table>  </body></html>

复制代码

效果如下：

QQ 表情选择

代码如下：

<!DOCTYPE html><html><head>    <meta charset="UTF-8" />    <title>QQ表情选择</title>   <script  src="../../js/jquery-3.3.1.min.js"></script>    <style type="text/css">    *{margin: 0;padding: 0;list-style: none;}
    .emoji{margin:50px;}    ul{overflow: hidden;}    li{float: left;width: 48px;height: 48px;cursor: pointer;}    .emoji img{ cursor: pointer; }    </style>  <script>        //需求：点击qq表情，将其追加到发言框中        $(function () {            //1.给img图片添加onclick事件            $("ul img").click(function(){                //2.追加到p标签中即可。                $(".word").append($(this).clone());            });
        });
        </script>  </head><body>    <div class="emoji">        <ul>            <li><img src="img/01.gif" height="22" width="22" alt="" /></li>            <li><img src="img/02.gif" height="22" width="22" alt="" /></li>            <li><img src="img/03.gif" height="22" width="22" alt="" /></li>            <li><img src="img/04.gif" height="22" width="22" alt="" /></li>            <li><img src="img/05.gif" height="22" width="22" alt="" /></li>            <li><img src="img/06.gif" height="22" width="22" alt="" /></li>            <li><img src="img/07.gif" height="22" width="22" alt="" /></li>            <li><img src="img/08.gif" height="22" width="22" alt="" /></li>            <li><img src="img/09.gif" height="22" width="22" alt="" /></li>            <li><img src="img/10.gif" height="22" width="22" alt="" /></li>            <li><img src="img/11.gif" height="22" width="22" alt="" /></li>            <li><img src="img/12.gif" height="22" width="22" alt="" /></li>        </ul>        <p class="word">            <strong>请发言：</strong>            <img src="img/12.gif" height="22" width="22" alt="" />        </p>    </div></body></html>

复制代码

效果如下：

多选下拉框左右移动

代码如下：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <script  src="../../js/jquery-3.3.1.min.js"></script>

    <style>      #leftName , #btn,#rightName{        float: left;        width: 100px;        height: 300px;      }      #toRight,#toLeft{        margin-top:100px ;        margin-left:30px;        width: 50px;      }
      .border{        height: 500px;        padding: 100px;      }    </style>
    <script>
      //需求：实现下拉列表选中条目左右选择功能            $(function () {        //toRight        $("#toRight").click(function () {          //获取右边的下拉列表对象，append(左边下拉列表选中的option)          $("#rightName").append($("#leftName > option:selected"));                });
                //toLeft                $("#toLeft").click(function () {                    //appendTo   获取右边选中的option，将其移动到左边下拉列表中          $("#rightName > option:selected").appendTo($("#leftName"));
                });            });      
    </script>


  </head>  <body>    <div class="border">      <select id="leftName" multiple="multiple">        <option>张三</option>        <option>李四</option>        <option>王五</option>        <option>赵六</option>      </select>      <div id="btn">        <input type="button" id="toRight" value="-->"><br>        <input type="button" id="toLeft" value="<--">
      </div>
      <select id="rightName" multiple="multiple">        <option>钱七</option>      </select>
    </div>

  </body></html>

复制代码

效果如下：

「其他文章」

一文入门 jQuery

jQuery 概念

快速入门

步骤：

JQuery 对象和 JS 对象区别与转换

选择器：筛选具有相似特征的元素(标签)

基本操作学习

事件绑定

入口函数

样式控制：css 方法

分类

基本选择器

标签选择器（元素选择器）

id 选择器

类选择器

并集选择器

层级选择器

后代选择器

子选择器

属性选择器

属性名称选择器

属性选择器

复合属性选择器

过滤选择器

首元素选择器

尾元素选择器

非元素选择器

偶数选择器

奇数选择器

等于索引选择器

大于索引选择器

小于索引选择器

标题选择器

表单过滤选择器

可用元素选择器

不可用元素选择器

选中选择器

选中选择器

DOM 操作

内容操作

属性操作

通用属性操作

对 class 属性操作

CRUD 操作:

append():父元素将子元素追加到末尾

prepend():父元素将子元素追加到开头

appendTo():

prependTo()：

after():添加元素到元素后边

before():添加元素到元素前边

insertAfter()

insertBefore()

remove():移除元素

empty():清空元素的所有后代元素。

案例

全选和全不选

QQ 表情选择

多选下拉框左右移动