JQuery简单使用

  • jQuery是一个轻量级,兼容多浏览器的JavaScript库;
  • 更方便的处理HTML Document (文档), Events(事件),实现动画效果,方便地进行Ajax交互,能简化JavaScript编程,宗旨是:'Write less, do more.'
  • jQuery的优势
  • 1.一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

2.丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

3.链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

4.事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

5.Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

6.跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

7.插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
    jQuery的优势

jQuer查找标签

  • id选择器:
  • $("#id")得到是一个jQuery对象
  • 标签选择器:
  • $("tagName")得到也是一个jQuery对象

jQuery对象通过索引得到是标签对象,可以使用标签内置方法
  • class选择器:
  • $(".className")得到一个jQuery对象
  • 配合使用:
  • $("div.c1")  // 找到有c1 class类的div标签
  • 所有元素选择器:
  • $("#id, .className, tagName")
  • 层级选择器:
  • $("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
  • ###基本选择器
    :first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一或多个标签在其内的标签(指的是从后代(子子孙孙)元素找)

    var s = $('div:first');  找到第一个div标签
    s
    w.fn.init [div#s1, prevObject: w.fn.init(1)]0: div#s1length: 1prevObject: 


    var s = $('div:last');  找到最后一个标签
    s
    w.fn.init [div.s3, prevObject: w.fn.init(1)]0: div.s3length: 1prevObject: 

    var s = $('div');   找到所有div标签
    s
    w.fn.init(3) [div#s1, div.s2, div.s3, prevObject: w.fn.init(1)]

  • 属性选择器:
  • [attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

    案例:
    <input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
  • 筛选器
    • 下一个元素:
    • $("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
    • 上一个元素:
    • $("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
    • 父亲元素:
    • $("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，
      直到遇到匹配的那个元素为止。
    • 儿子和兄弟元素:
    • $("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
    • 查找:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
    • $("div").find("p") 

  • 操作标签

    • 样式操作:
    • addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
    • css
    • css("color","red")//DOM操作：tag.style.color="red"
如果想要设置多个,则按对象(字典)格式传入多个属性值即可;
      css('{'color':'green','font-size':'16px'}')

样例:$("p").css("color", "red"); //将所有p标签的字体设置为红色
    • 位置:
    • offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
    •   <style>
    .s1{
      position: relative;
       100px;
      height: 100px;
      background-color: aqua;
    }
    .s2{
      position: absolute;
       100px;
      height: 100px;
      background-color: blue;
      left: 100px;
      top: 100px;
    }
  </style>
</head>
<body>
<div class="s1">
  <div class="s2"></div>
</div>


#输出
$('.s1').offset();
{top: 8, left: 8}
$('.s2').offset()
{top: 108, left: 108}
$('.s2').position()
{top: 100, left: 100}
      定位例子 
    • 尺寸:
    • height()  #指的是content内容的高度
width()   #指的是标签内content内容的宽度
innerHeight() #content + padding(上 和 下)
innerWidth()   
outerHeight() #content + padding上和下) + boder(上和下)
outerWidth()

  • 文本操作

    • HTML代码:
    • html() // 如果匹配到多个对象,则显示第一个内容

$('.s1').html()

"55699
  <div class="s2">
    <p><span>1122</span></p>
  </div>
"

里面可以放参数,则把当前标签下所有内容替换成参数值

      $('.s1').html('<a href="https://www.baidu.com">百度一下</a>')

        $('.s1').html()
        "<a href="https://www.baidu.com">百度一下</a>"

    • 文本值:
    • text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
      不认识标签,只能单一显示纯文本
    • 值:
    • val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置checkbox、select的值
    • 示例:val获取value值
    • 获取radio的值:
$('input:checked').val()
"1"
$('input:checked').val()
"0"

获取checkbox的值:
跟radio一样,只是当你选中多个选项时,
$(input[name='checkbox']:checked).val()默认返回的是第一个;

  • 属性操作

    • 用于ID等或自定义属性:
    • attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
    • 用于checkbox和radio(得到True or false):
    • prop() // 获取属性
removeProp() // 移除属性

      跟attr类似,,获取文本类属性时,用attr
      获取bool值时,用prop;

  • 文档处理 

    • 添加到指定元素内部的后面,包含在标签内
    • $(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

例子:::
var dEle1 = document.createElement('div')
dEle1.innerText = '黑山老妖'
$('#d1').append(dEle1)

html结构:::
<div id="d1">
    黄袍哥
    <div>黑山老妖</div>
</div>
    • 添加到指定元素的外部的后面
    • $(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面


例子:::
var dEle1 = document.createElement('div')
dEle1.innerText = '黑山老妖'
$('#d1').after(dEle1)

html结构:::
<div id="d1">黄袍哥</div>
<div>黑山老妖</div>
    • 添加到指定元素内部的前面
    • $(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
    • 添加到指定元素外部的前面
    • $(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
    • 移除和清空元素
    • remove()// 从DOM中删除所有匹配的元素(把调用这个方法的标签,内容都删除)。
      $('#d1').remove()  ##把id为d1删除
      
empty()// 删除匹配的元素集合中所有的子节点。
      保留标签本身,
    • 替换
    • replaceWith()  ## $('p').replaceWith(dom) 把p标签替换为dom标签
replaceAll()   ## $(dom).replaceAll('p')替换页面的所有的p标签
    • 克隆
    • clone()// 参数

      <button id="b1">666</button>
      <script src="jquery-3.3.1.min.js"></script>
      <script>
          $('#b1').click(function () {
              // 这个true代表把事件也一起克隆
              $(this).clone(true).insertAfter(this);
          })
      </script>
       

  • 事件 

    • 常用事件:
    • click(function(){...})   #触发
hover(function(){...})  #鼠标移进移出
blur(function(){...})     #鼠标聚焦消失退出
focus(function(){...})    #鼠标聚焦进入
change(function(){...})  #改变value值
keyup(function(){...})     #鼠标按下移开
    • 思想: 1.keydown事件:::按下shift将一个全局变量设为True,
        2.标签触发事件根据变量是否为真,然后判断是否触发
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>


<table border="1" id="t1">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>绝技</th>
        <th>状态</th>
        <th>操作</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td>
        <td>任我行</td>
        <td>吸星大法</td>
        <td>
            <select name="tai" id="ll">
                <option value="1">在职</option>
                <option value="2">下线</option>
                <option value="3">离职</option>
            </select>
        </td>
        <td>
            <button class="s1">移除</button>
        </td>
        <td><input type="checkbox" name="hobby"></td>
    </tr>

    <tr>
        <td>002</td>
        <td>令狐冲</td>
        <td>独孤九剑</td>
        <td>
            <select name="tai">
                <option value="1">在职</option>
                <option value="2">下线</option>
                <option value="3">离职</option>
            </select>
        </td>
        <td>
            <button class="s1">移除</button>
        </td>
        <td><input type="checkbox" name="hobby"></td>
    </tr>

    <tr>
        <td>003</td>
        <td>林平之</td>
        <td>辟邪剑法</td>
        <td>
            <select name="tai">
                <option value="1">在职</option>
                <option value="2">下线</option>
                <option value="3">离职</option>
            </select>
        </td>
        <td>
            <button class="s1">移除</button>
        </td>
        <td><input type="checkbox" name="hobby"></td>
    </tr>
    </tbody>
</table>

<button id="b1">添加</button>
<button id="b2">全选</button>
<button id="b3">反选</button>
<button id="b4">取消</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $('#b1').click(function () {
        var tdEle = document.createElement('tr');
        tdEle.innerHTML = `
            <td>004</td>
            <td>任盈盈</td>
            <td>暗影飞蝶</td>
            <td>
                <select name="tai">
                    <option value="1">在职</option>
                    <option value="2">下线</option>
                    <option value="3">离职</option>
                </select>
            </td>
            <td>
                <button class="s1">移除</button>
            </td>
            <td><input type="checkbox" name="hobby"></td>
        `;
        $('#t1').append(tdEle)
    });

    $(window).on('click', '.s1', function () {
        $(this).parent().parent().remove();
    });

    $('#b2').click(function () {
        $(':checkbox').prop('checked', true);
    });

    $('#b4').click(function () {
        $(':checkbox').prop('checked', false);
    });

    $('#b3').click(function () {
        var $check = $(':checkbox');
        for (var i = 0; i < $check.length; i++) {
            $($check[i]).prop('checked', !($($check[i]).prop('checked')))
        }
    });

    var flag = false;
    // 先判断按键是否被按下,然后把全局变量置为true,触发另一事件
    $(window).on('keydown',function (event) {
        if (event.keyCode === 16){flag = true;}
    });

    $(window).on('keyup',function (event) {
        if(event.keyCode === 16){flag = false;}
    });
    // 事件委托
    $('table').on('change','select',function () {
        if(flag){
            var $find = $(this).parent().siblings().last().find('input');
            if($($find).prop('checked')){
                var $val = $(this).val();
                $('input:checked').parent().parent().find('select').val($val);
            }
        }
    })

</script>
</body>
</html>
      shift赋值
    • <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

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

<script src="jquery-3.3.1.js"></script>
<script>
    // 只要input框的值发生变化就触发
    $("#i1").on("input", function () {
        var value = $(this).val();
        console.log(value);
    })
</script>

</body>
</html>
      实时监测input框
      #若input框为空,则取消submit的默认事件,自动刷新页面
<!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>
    </style>
</head>
<body>
<form action="">
    <input type="text" id="i1">
    <input type="submit" id="i2">
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    // submit触发事件,判断是否input是否为空,若为空则阻止submit的默认事件
    $('#i2').on('click',function (event) {
        if($('#i1').val().length === 0){event.preventDefault()}
    })
</script>
</body>
</html>
      取消自动触发事件
    • 页面载入
    • $(document).ready(function(){
// 在这里写你的JS代码...
})

      简写:

    • $(function(){
// 你在这里写你的代码
})
    • each循环机制
    • <!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>
    </style>
</head>
<body>
<form action="">
    <input type="text" id="i1">
    <input type="submit" id="i2">
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // submit触发事件,判断是否input是否为空,若为空则阻止submit的默认事件
    $('#i2').on('click',function (event) {
        if($('#i1').val().length === 0){event.preventDefault()}
    });
    var li = [11,22,33];
    $.each(li,function (k,v) {
        // 1.跳出本次循环,直接return相当于continue
        // if (k === 1){return}    //结果:11 33 end

        // 2.return false结束本次循环,相当于break
        if(k ===1 ){return false}  //结果:11 end
        console.log(v);

    });
    console.log('end');
</script>
</body>
</html>
      each的return效果
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/0627zhou/p/9610417.html