1. 技术文章
  2. jQuery

jQuery

由 人走茶凉 提交于 2020-02-25 14:58:33

介绍

jQuery是一个javascript库，核心理念是write less,do more(写得更少,做得更多)，他内部帮我们把几乎所有功能都做了封装，相比上一节基于DOM、BOM操作会更加简单。

例如：根据ID选择标签

// DOM 选择
document.getElementById('item');

// jQuery 选择
$('#item');

快速应用

在使用jQuery时，需要提前下载并应用jQuery之后，才能在代码中使用。

下载jQuery http://jquery.com/download/

应用jQuery

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>jQuery学习</title>
    <style>
    </style>
</head>
<body>

<div id="item">Hello world
    <div>我是item的子标签</div>
</div>


<!--导入jQuery-->
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
    // 获取标签文本内容
    var tar = $('#item').text(); // 如果需要修改内容，在text（）里添加即可
    alert(tar)
</script>

</body>
</html>

DOM对象和jQuery对象

DOM对象和jQuery对象都为标签提供了各种各种功能，并且两者之间可以进行相互转换。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>jQuery学习</title>
    <style>
    </style>
</head>
<body>
<div id="content">
    Hello world
</div>
<!--导入jQuery-->
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">

    // Dom对象转换jQuery对象：$(dom对象)
    var D_Q = $(document.getElementById('content'));
    // jQuery对象转换成Dom对象：jQuery对象[0]
    var Q_D = $('#content')[0];
    console.log('D-Q',D_Q);
    console.log('Q-D',Q_D)
</script>

</body>
</html>

选择器

id选择器

HTML代码：

<div id="content">Hello World</div>

jQuery代码：

$('#content)

class选择器

HTML代码：

<div class="wrong-poem">Hello World</div>
<div class="poem">昨夜雨疏风骤，浓睡不消残酒。</div>
<div class="poem">试问卷帘人，却道海棠依旧。</div>
<div class="poem">知否，知否？</div>
<div class="poem">应是绿肥红瘦。</div>

jQuery代码：

$('.poem')

运行

<script type="text/javascript">
    var tar = $('.poem');
    console.log(tar);
    for (var i=0;i<tar.length;i++){
        console.log(tar[i])
    }
</script>

结果

标签选择器

HTML代码：

<div>div标签</div>
<span>span标签</span>

jQuery代码：

$('div')

结果

多选选择器

HTML代码：

<div>2</div>
<span>1</span>
<p>3</p>

jQuery代码：

$('span,div,p')

结果

层叠选择器

HTML代码：

<div class="out">
    <div>我是内部div</div>
    <div>我也是</div>
</div>

jQuery代码：

$('.out div')

结果

属性选择器

HTML代码：

<input type="radio" name="gender" value="0">
<input type="radio" name="gender" value="1">
<input type="checkbox" name="hobby" value="1">

jQuery代码：

$('input[name="gender"]')

结果

表单选择器

HTML代码：

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select>
        <option>Option</option>
    </select>
    <textarea> </textarea>
    <button>Button</button>
</form>

jQuery代码：

$(":text")          // 找到所有input标签
// $(":input")      找到所有input标签
// $(":password")   找到所有input且type=password的标签
// $(":radio")      找到所有input且type=radio的标签
// $(":checkbox")   找到所有input且type=checkbox的标签

结果

筛选器

筛选器一般用于对选择器选中的标签进行再次筛选。

parent 父标签

HTML代码：

<div class="body">
    <p>p1</p>
    <p>p2</p>
</div

jQuery代码：

$('p').parent()

结果

children 所有子标签

children('a') 可以传入值 

HTML代码：

<div class="outside">
    <div class="inside">
        <p>p标签</p>
    </div>
</div>

jQuery代码：

$('.outside').children()

结果

next 下一个兄弟标签

HTML代码：

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

jQuery代码：

$('.first').next()

结果

prev 上一个兄弟标签

HTML代码：

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

jQuery代码：

$('.second').prev()

结果

siblings 所有兄弟标签

HTML代码：

<div>
    <div class="all-siblings"></div>
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
</div>

jQuery代码：

$('.all-siblings').siblings()

结果

find 子孙中查找标签

HTML代码：

<div>
    <p>
        <span>
            <a>
                <img src="">
            </a>
        </span>
    </p>
</div>

jQuery代码：

$('div').find('img')

结果

first 匹配的第一个标签

HTML代码：

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

jQuery代码：

$('ul li').first()

结果

last 匹配的最后一个标签

HTML代码：

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

jQuery代码：

$('ul li').last()

结果

属性

增删样式

addClass　　增加样式

removeClass 删除样式

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>jQuery学习</title>
    <style>
        .old {
            width: 100px;
            height: 100px;
            background-color: #ff6700;
        }
        .new {
            width: 500px;
            height: 500px;
            background-color: green;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="old hide"></div>
</body>
</html>

HTML代码：

var tar = $('.old');
tar.addClass('new'); // 增加
tar.removeClass('hide') // 删除

html、text文本

HTML代码：

<div class="item1">
    <a>百度</a>
</div>

<div class="item2">
</div>

jQuery代码：

取值时

html 取标签

text 取文本

// 取值
var tar = $('.item1');
tar.html(); // <a>百度</a>
tar.text(); // 百度

设值时

html 创建的标签可以识别

set_ele.html('<a href="#">html一下</a>')

text 创建的标签不能被识别

set_ele.text('<a href="#">text一下</a>')

val 值

HTML代码：

<input type="text" id="username">

<input type="radio" class="a1" name="gender" value="1">男
<input type="radio" class="a1" name="gender" value="0">女

<input type="checkbox" class="a2" name="hobby" value="1">篮球
<input type="checkbox" class="a2" name="hobby" value="2">足球
<input type="checkbox" class="a2" name="hobby" value="3">羽毛球

<select name="city" id="s1">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
</select>

<select name="lover" id="s2" multiple>
    <option value="1">波多</option>
    <option value="2">苍井</option>
    <option value="3">小泽</option>
</select>

jQuery代码：

获取值：
    文本输入框：$('#username').val();
    单选radio框：$('.a1:checked').val();
    多选checkout框：$('.a2:checked').val()是不行的;需要循环取值，如下：
    var d = $(':checkbox:checked');
        for (var i=0;i<d.length;i++){
            console.log(d.eq(i).val());
        }
    单选select框：$('#city').val()；
    多选select框：$('#lover').val();
设置值：
    文本输入框：$('#username').val('you are my love');
    单选radio框：$('.a1').val([2]);  #注意里面必须是列表，写的是value属性对应的值
    多选checkout框：$('.a2').val(['2','3'])
    单选select框：$('#city').val('1')；
    多选select框：$('#lover').val(['2','3'])

实例

模态框添加和编辑功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Study</title>
    <style>
        table{
            border-collapse: collapse;
            margin-bottom: 5px;
        }
        table th,td{
            border: #b0b0b0 2px solid;
            padding: 5px;
        }
        .cover {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: black;
            opacity: 0.7;
        }
        .login{
            text-align: center;
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: white;
        }
        .login div{
            margin-bottom: 20px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<table>
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
        <th>工资</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox" name="id"></td>
        <td>小明</td>
        <td>做数学</td>
        <td><input class="expel" type="button" value="开除"></td>
        <td>100</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="id"></td>
        <td>小红</td>
        <td>爱小明</td>
        <td><input class="expel" type="button" value="开除"></td>
        <td>10</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="id"></td>
        <td>小军</td>
        <td>揍小明</td>
        <td><input class="expel" type="button" value="开除"></td>
        <td>1</td>
    </tr>
    </tbody>
</table>
<button id="add_user">添加新用户</button>
<div class="cover hide"></div>
<div class="login hide">
    <h3>用户添加界面</h3>
    <div>姓名<input class="name" type="text"></div>
    <div>爱好<input class="hobby" type="text"></div>
    <div>工资<input class="money" type="text" value="1"></div>
    <input class="login-submit" type="button" value="提交">
    <input class="login-reset" type="button" value="取消">
</div>

<script type="text/javascript" src="../js/jquery.js"></script>
<script>
    // 删除
    $('table').on('click','.expel',function () {
        var status = $('td input[name="id"]:checked'); // 返回选中的对象
        // 批量删除
        if (status.length!==0){
            for (var i=0;i<status.length;i++){
                var tar = $(status[i]).parent().parent();
                tar.remove()
            }
        }
        // 没有批量，删单个
        else{
            ($(this).parent().parent().remove());
        }
    });
    // 添加用户
    $('#add_user').on('click',function () {
        // 清空以前的数据,移除遮挡
        $('.login div input').val('');
        $('.cover,.login').removeClass('hide')
    });
    // 确认添加
    $('.login-submit').on('click',function () {
        var name = $('.login .name').val();
        var hobby = $('.login .hobby').val();
        var expel = '<input class="expel" type="button" value="开除">';
        var money = $('.login .money').val();
        var tr_ele = document.createElement('tr'); // 创建新元素
        // 给新元素,添加子元素,必须查找后才能才能使用append
        $(tr_ele).append('<td><input type="checkbox" name="id"></td>');
        $(tr_ele).append('<td>'+ name +'</td>');
        $(tr_ele).append('<td>'+ hobby + '</td>');
        $(tr_ele).append('<td>'+ expel +'</td>');
        // 不同不是添加
        var td_ele = document.createElement('td');
        td_ele.innerHTML = money;
        $(tr_ele).append(td_ele);
        // 添加到表单中
        $('table tbody').append(tr_ele);
        // 恢复遮挡
        $('.cover,.login').addClass('hide')
    });
    // 取消添加
    $('.login-reset').on('click', function () {
        // 恢复遮挡
        $('.cover,.login').addClass('hide')
    })
</script>
</body>
</html>

prop 属性值

HTML代码：

<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="0">女

jQuery代码：

$(':radio').prop('checked')

结果

false

实例

全选、取消、反选。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery学习</title>
    <style>
    </style>
</head>
<body>

<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">羽毛球
<div>
    <button class="get-all">全选</button>
    <button class="lose-all">取消</button>
    <button class="negation">反选</button>
</div>

<script src="../js/jquery.js"></script>
<script>
    // 全选
    $('.get-all').on('click',function () {
        $(':checkbox').prop('checked',true);
    });

    // 取消
    $('.lose-all').on('click',function (){
        $(':checkbox').prop('checked',false)
    });

    //反选
    $('.negation').on('click',function () {
        var tar = $(':checkbox');
        for (var i=0;i<tar.length;i++){
            // tar[i].checked = !tar[i].checked 第一种
            $(tar[i]).prop('checked',!tar[i].checked) // 第二种,记得前面加$,这样才有prop方法
        }
    })

</script>
</body>
</html>

文档处理

append 内部插入

被选元素内部后插入

HTML代码：

<div class="out">
    <div>内部div</div>
</div>

jQuery代码：

$('.out').append('<p>来喽来喽</p>')

结果

prepend 内部插入

被选元素内部前插入

HTML代码：

<div class="out">
    <div>内部div</div>
</div>

jQuery代码：

$('.out').prepend('<p>来喽来喽</p>')

结果

after 外部插入

被选元素外部后插入

HTML代码：

<div class="out">
    <div>内部div</div>
</div>

jQuery代码：

$('.out').after('<div>新的div</div>')

结果

before 外部插入

HTML代码：

<div class="out">
    <div>内部div</div>
</div>

jQuery代码：

$('.out').before('<div>新的div</div>')

结果

empty 删除被选标签内部的标签

被选中的标签会存在

HTML代码：

<div class="out">
    <div>内部div</div>
    <span>内部span</span>
</div>

jQuery代码：

$('.out').empty()

结果

 

remove 删除标签

被选中的标签不会存在

HTML代码：

<div class="out">
    <div>内部div</div>
    <span>内部span</span>
</div>

jQuery代码：

$('.out').remove()

事件

jQuery绑定事件

HTML代码：

<ul>
    让他们变绿
    <li>小明</li>
    <li>小红</li>
    <li>小军</li>
</ul>

jQuery代码：

 　　// 鼠标按下
    $('li').on('mousedown',function () {
        this.style.color = 'green'
    });
    // 鼠标抬起
    $('li').on('mouseup',function () {
        this.style.color = 'black';
        var name = $(this).text();
        $(this).text(name + ':我不想变绿了')
    });

实例

左侧菜单切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery学习</title>
    <style>
        body{margin: 0;}
        .menu{
            width: 200px;
            background-color: #b0b0b0;
        }
        .menu .title{
            background-color: #ff6700;
            font-size: 15px;
            cursor: pointer;
        }
        .menu .title .item{
            background-color: greenyellow;
            padding: 0 5px;
            cursor: pointer;
        }
        .menu .title .item:hover{
            color: white;
            background-color: green;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="menu">
    <div class="title">选择1
        <div class="item hide">item</div>
        <div class="item hide">item</div>
        <div class="item hide">item</div>
    </div>
    <div class="title">选择2
        <div class="item hide">item</div>
        <div class="item hide">item</div>
        <div class="item hide">item</div>
    </div>
    <div class="title">选择3
        <div class="item hide">item</div>
        <div class="item hide">item</div>
        <div class="item hide">item</div>
    </div>
</div>

<script src="../js/jquery.js"></script>
<script>
    $('.title').click(function () {
        // 判断item标签是否有hide
        var status = $(this).children('.item').is('.hide');
        // 全部添加hide
        $('.title .item').addClass('hide');
        //有的话打开
        if (status){
            $(this).children().removeClass('hide')
        }
    });
</script>
</body>
</html>

jQuery更多事件

使用方法和click都是类似的，事件列表如下：

jQuery事件委托

jQuery的事件绑定是在页面加载完毕之后，找到相关标签并为其绑定事件，如果后期通过js代码有新增表现，那么新标签中模式是没有事件的，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery学习</title>
    <style>
    </style>
</head>
<body>

<ul>
    让他们变绿
    <li>小明</li>
    <li>小红</li>
    <li>小军</li>
</ul>
<div>
   <input type="text">
</div>
<button class="new_user">新增</button>

<script src="../js/jquery.js"></script>
<script>
    // 鼠标悬停
    $('li').mousemove(function () {
        this.style.color = 'green'
    });
    // 鼠标离开
    $('li').mouseleave(function () {
        this.style.color = 'black';
        var name = $(this).text();
        $(this).text(name + ':我不想变绿了')
    });
    // 新增按钮
    $('.new_user').click(function () {
        var name = $('div :text').val();
        if (name.trim()!==''){
            $('ul').append('<li>'+ name +'</li>')
            }
        })
</script>
</body>
</html>

为了避免类似这种情况的发生，jQuery中引入了事件委托的概念，只需要基于on进行绑定即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery学习</title>
    <style>
    </style>
</head>
<body>

<ul>
    让他们变绿
    <li>小明</li>
    <li>小红</li>
    <li>小军</li>
</ul>
<div>
   <input type="text">
</div>
<button class="new_user">新增</button>

<script src="../js/jquery.js"></script>
<script>
    // 鼠标悬停
    $('ul').on('mousemove','li',function () {
        this.style.color = 'green'
    });
    
    // 鼠标离开
    $('ul').on('mouseleave','li',function () {
        this.style.color = 'black';
        var name = $(this).text();
        $(this).text(name + ':我不想变绿了')
    });
    
    // 新增按钮
    $('.new_user').click(function () {
        var name = $('div :text').val();
        if (name.trim()!==''){
            $('ul').append('<li>'+ name +'</li>')
        }
    })
</script>
</body>
</html>

更多

on方法

语法：$(selector).on(event,childSelector,data,function)

event 必需。规定要从被选元素移除的一个或多个事件或命名空间。

由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。

 

$('ul').on('click','li',function () {
        this.style.color = 'green'
    });

off方法

语法：$(selector).off(event,selector,function(eventObj),map)

event 必需。规定要从被选元素移除的一个或多个事件或命名空间。

由空格分隔多个事件值。必须是有效的事件。
selector 可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj) 可选。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

 

$("button").click(function(){
    $("p").off("click");
});

is方法

语法：$(selector).is(selectorElement,function(index,element))

selectorElement 必须。选择器表达式，根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true，否则返回 false
function(index,element)

可选。指定了选择元素组要执行的函数。

  • index - 元素的索引位置
  • element - 当前元素 ( "this" 选择器也可以使用 )

 

$(div).is('item')

Ajax

ajax作用：通过JavaScript代码向网络上的地址发送异步请求。

为了本地测试方便，我们通过ajax向本地json文件发送请求并获取数据。

student_info.json

[
    {'id':'1','name':'小明','gender':'male'},
    {'id':'2','name':'小红','gender':'female'},
    {'id':'3','name':'小军','gender':'male'},
]

基本代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery学习</title>
</head>
<body>

<input type="button" id="btn" value="获取数据">

<script src="../js/jquery.js"></script>
<script type="text/javascript">
  $(function () {
      $('#btn').click(function () {
          $.ajax({
              type: 'GET',
              // 也可以向网络地址 http://www.xxxx.com 发送请求。
              url: '../json/student_info.json',
              success: function (arg) {
                  console.log(arg);
              }
          })
      });
  })
</script>
</body>
</html>

实例

基于ajax实现数据管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery学习</title>
    <style>
        table{
            border-collapse: collapse;
        }
        table th,td{
            border: #b0b0b0 1px solid;
            text-align: center;
        }
    </style>
</head>
<body>

<table>
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<input class="getData" type="button" value="加载内容">


<script src="../js/jquery.js"></script>
<script>
    $('.getData').click(function () {
        $.ajax({
            // 请求类型
            type:'get',
            // 也可以向网络地址 http://www.xxxx.com 发送请求。
            url:'../json/student_info.json',
            // 成功后
            success:function (arg) {
                for(var i in arg){
                    var id = '<td>'+arg[i]["id"]+'</td>';
                    var name = '<td>'+arg[i]["name"]+'</td>';
                    var gender = '<td>'+arg[i]["gender"]+'</td>';
                    $('tbody').append('<tr>'+id+name+gender+'</tr>')
                }
            }
        })
    })
</script>
</body>
</html>

 

标签
jquery
html代码
jquery事件
jquery选择器
checkbox样式
input
按钮
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!