码迷，mamicode.com
首页 > Web开发 > 详细

jQuery

时间：2020-02-25 14:40:29      阅读：79      评论：0      收藏：0      [点我收藏+]

标签：检查   rip   创建   padding   ble   for   style   OLE   NPU   

介绍

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

标签：检查   rip   创建   padding   ble   for   style   OLE   NPU   

原文地址：https://www.cnblogs.com/py-peng/p/12356289.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！