jQuery

1,jQuery 定义

jQuery是一个优秀的javascript框架，核心理念是write less,do more(写得更少,做得更多)，兼容各种浏览器。

它是一个快速的，简洁的javascript 库，它内部帮我们把几乎所有功能都做了封装，使用户更能方便的处理HTML douments,events,实现动画效果，并且方便地为网站提供AJAX交互。

JQuery 还有一个比较大的优势是：他的文档说明很全，而且各种应用也说的很详细，同时还有许多成熟的插件可供选择。

jQuery 下载网址：https://jquery.com/download/

jQuery 中文解释网站：https://jquery.cuishifeng.cn/index.html

2，jQuery 对象

jQuery 对象是：jQuery 或者$ 如下：

首先现在jQuery 3.6.0版本，然后在javascript 中引入jQuery.

<body>
<div>hello</div>
<script src="jquery3.6.0.js"></script>
<script>
    jQuery('div').css('color','red')
</script>
</body>

效果如下：

hello

jQuery 的基础语法：$(选择器).action操作()

3,jQuery 选择器和筛选器

1）基本选择器

$('*') 代表所有标签

$('#id') 代表通过id来找对应的标签

$('.class') 代表通过类来找对应的标签

$('标签名') 代表通过标签名来匹配标签

$('#id,.class,标签名')代表找符合各个条件的所有标签,这几个#id,.class,标签名之间是或的关系。

<body>
<div>hello</div>
<p id="p1">ppp</p>
<a href="">click</a>

<div class="outer">outer
    <div class="inner">inner</div>
</div>

<script src="jquery3.6.0.js"></script>
<script>
    // $('*').css('color','red'); //====结果是所有的内容字体都是红色
    // $('#p1').css('color','red'); //====结果是id=p1的标签的内容字体是红色
    // $('.inner').css('color','red');//===结果是class=inner的标签内容字体是红色
    // $('div').css('color','red'); //===结果是标签名为div的标签的内容字体是红色
    $('#p1,a,.inner').css('color','red')//===结果是标签id=p1 或者标签名为a 或者class=inner 的标签只要满足一个条件就OK。
</script>
</body>

2）层级选择器

$('.X Y') 代表找class=X的标签的后代标签名为Y的所有标签

$('.X>Y') 代表找class=X的标签的儿子辈的标签名为Y的所有标签

$('.X+Y') 代表在class=X的标签下边的，紧挨着的，标签名为Y兄弟标签

$('.X~Y') 代表在class=x的标签下边的标签名为Y的所有兄弟标签

<body>
<div>hello</div>
<p id="p1">ppp</p>
<div class="outer">outer
    <div class="inner">inner
        <p>p-inner</p>
    </div>
    <p>alex</p>
</div>
<p>ss</p>
<hr>
<p>aa</p>
<script src="jquery3.6.0.js"></script>
<script>
   // $('.outer p').css('color','red') //找所有后代==》结果是p-inner, alex字体变红
   //  $('.outer>p').css('color','red')//只找儿子辈 ==》结果是alex字体变红
   //  $('.outer+p').css('color','red')//向下查找紧挨着的兄弟标签==》结果是ss字体变红
    $('.outer~p').css('color','red') //向下查找所有的兄弟标签===》结果是：ss 和aa字体变红
</script>
</body>

3）属性选择器

$('[id='div1]') 代表通过一个属性选择标签

$('['alex'='sb'][id]) 代表通过2个属性来选择标签，这两个属性之间是&的关系

<body>
<p id='1' alex="ss">ss</p>
<p alex="ss1">ss1</p>
<p id='3' alex="ss">ss</p>
<script src="jquery3.6.0.js"></script>
<script>
    $('[alex="ss"]').css('color','red')//找到满足alex='ss'的所有标签
    // $('[alex="ss"][id="1"]').css('color','red')//通过属性alex='ss'和id='1'来筛选符合这两个属性的标签
</script>
</body>

4）表单选择器

$('[type='text']') 可以写成----->$(':text') 注意只适用于input标签例如：$('input:checked')

<body>
<input type="button" value="点击">
<input type="text">
<input type="submit">

<script src="jquery3.6.0.js"></script>
<script>
    // $('[type="text"]').css('width','100px') //此代码与下边代码效果一样
    $(':text').css('width','100px')
</script>
</body>

5）基本筛选器(进行筛选）：代表筛选

$('X:first') 代表找到标签名为X的所有标签中的第一个

$('X:last')代表找到标签名为X的所有标签中的最后一个

$('X:eq(2)) 代表： eq(数字)代表类似所有的X标签集合的索引即找到所有名字为X的标签集合中的索引为‘数字’的X标签

$('li:even') 代表找到所有标签名为li的所有标签中索引为偶数的li标签

$('li:odd') 代表找到标签名为li的所有标签中索引为奇数的li标签

$('li:gt(1)') 代表找到标签名为li的所有标签中：索引大于索引gt1)的标签

$('li:lt(1)') 代表找到标签名为li的所有标签中：索引小于索引gt1)的标签

<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<script src="jquery3.6.0.js"></script>
<script>
   // $('.outer p').css('color','red') //找所有后代==》结果是p-inner, alex字体变红
   //  $('.outer>p').css('color','red')//只找儿子辈 ==》结果是alex字体变红
   //  $('.outer+p').css('color','red')//向下查找紧挨着的兄弟标签==》结果是ss字体变红
   //  $('.outer~p').css('color','red') //向下查找所有的兄弟标签===》结果是：ss 和aa字体变红
   //  $('ul li:first').css('color','red')//找到所有<li>标签中的第一个<li>标签
   //  $('li:eq(1)').css('color','red')//找到所有<li>标签中索引位置为1的li标签===》结果是：222字体变红
   //  $('li:even').css('color','red'); //代表找到所有<li>标签中的偶数行==》结果是111，333字体变红
   //  $('li:odd').css('color','red');//代表找到所有<li>标签中的奇数行==》结果是222字体变红
   //$('li:gt(1)').css('color','red')//代表找到标签名为li的所有标签中：索引大于索引gt(1)的标签==》结果是最后一行字体显示红色
　　//$('li:lt(1)').css('color','red')//代表找到标签名为li的所有标签中：索引小于索引gt1)的标签==》结果是第一个标签：111变红

</script>
</body>

6）过滤删选器删选器：形式如下：

$('li').eq(1).css('color','red')

$('li').first()css('color','red')

$('li').last().css('color','red')

<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>

<script src="jquery3.6.0.js"></script>
<script>
    // $('li:eq(1)').css('color','red');// 此代码与代码：$('li').eq(1).css('color','red');效果一样

    $('li').eq(1).css('color','red');//==结果是标签名为<li>的所有标签中，索引为1的标签内容字体为红色
    $('li').first().css('color','yellow');
    $('li').last().css('color','green');

</script>
</body>

7）查找筛选器

$('div').children('.test') : 只能找到儿子辈 $('div').find('.test') ：可以找到所有后代
$('.test').next()：只能找到紧挨着的下一个标签 $('.test').nextAll() ：可以找到下边所有的标签 $('.test').nextUntil('停止位置‘) ：能找到从下一个标签开始的标签直到停止位置的标签（不包括停止位置的标签）
$('div).prev()：只能找到紧挨着的上一个标签 $('div).prevAll()：同上next $('.test').prevUntil() :同上next
$('.test').parent():只能找到上一级的父亲标签 $('.test').parents() ：可以找到所有的父辈标签（不常用） $('.test').parentUntil(‘停止位置’) ：代表找到这个标签的父辈标签，但是只能找到‘停止位置’的这个标签，但是不包括这个‘停止位置’标签
$('div').siblings() 代表找到标签的所有兄弟标签

<body>
<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>
    <p>alex</p>
</div>
<div class="outer2">yuan</div>
<p>xialv</p>

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li id="end">444</li>
    <li>555</li>
</ul>
<p>ss</p>
<script src="jquery3.6.0.js"></script>
<script>
    // $('.outer').children('p').css('color','red'); //只能找到儿子辈
    // $('.outer').find('p').css('color','red');//可以找到所有后代
    // $('li').eq(1).next().css('color','red')//只能找到紧挨着的下一个标签
    // $('li').eq(1).nextAll().css('color','red')//可以找到它下边的所有标签
    //$('li').eq(1).nextUntil('#end').css('color','red')//可以找到这个标签的下一个标签到id='end'标签的上一个标签
    // console.log($('.outer .inner p').parent().html());//只能找到上一级的父亲标签
    //$('.outer .inner p').parentsUntil('.outer').css('color','green');//代表找到.inner内的p标签的父辈级标签，但是父级标签只找到class=outer的这级标签（不包括class=outer的这级标签）
    // $('.outer').sibling().css('color','red')//代表找到所有的兄弟标签进行设置
</script>
</body>

练习之左侧菜单：

<style>
    .all{
            height: 1000px;
             100%;
    }
    .menu{
        height: 500px;
        float: left;
         30%;
        background-color: beige;
    }
    .content{
        height: 500px;
        float: left;
         70%;
        background-color: #339900;
    }
    .title{
        background-color: crimson;
        line-height: 40px;
    }
    .hide{
        display: none;
    }

</style>
<body>

<div class="all">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单二</div>
            <div class="con hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单三</div>
            <div class="con hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>
    </div>
    <div class="content"></div>
</div>
<script src="jquery3.6.0.js"></script>
<script>
    function show(self) {
        $(self).next().removeClass('hide');
        $(self).parent().siblings().children('.con').addClass('hide')
    }
</script>
</body>

判断是否有此特性：$('删选的标签').hasclass('特性')

<body>
<div class="hi"></div>
<script src="jquery3.6.0.js"></script>
<script>
 document.write($('div').hasClass('hi'))
</script>
</body>

结果是：true

8) 属性操作

自定义属性用attr:

$('').attr()

$('').removeAttr()

固有属性用prop:

$('').prop()

$('').removeProp()

<body>
<div class="hi" ss="ni"></div>
<input type="checkbox" checked="checked">选择
<script src="jquery3.6.0.js"></script>
<script>
 // document.write($('div').attr('ss'));//结果是ni
 // document.write($('div').attr('ss','wo'));//即：ss='wo'
 // document.write($('div').attr('ss'))//结果是：wo
 // $('div').removeAttr('ss');//代表删除属性ss
 // document.write($('div').attr('ss'))//结果是undefined
// document.write($(':checkbox').prop('checked'))//结果是true
// document.write($(':checkbox').attr('checked'))//结果是checked
//     document.write($(':checkbox').prop('ss'))//结果是undefined
</script>
</body>

------------------------------- CSS类--------------

$('').addClass(class|fn)

$('').removeClass(class|fn)

-------------------------------HTML代码-------------------

$('').html([val|fn])

$('').text[val|fn])

$('').val([val|fn])------适用：固有属性

<input type="text" value="123">
<div value="456"></div>
<script src="jquery3.6.0.js"></script>
<script>
    // console.log($('div').html('<h>nini</h>'))//会将<div>标签中的所有内容换成标签<h>nini</h>
    // console.log($('div').text('<h>nini</h>'))//结果是标签div的内容变成<h>nini</h>，即div标签text=<h>nini</h>
    // console.log($(":text").val())//结果是：123
    // console.log($(':text').next().val())//结果是：空
    // console.log($(":text").val('777'))//改变val 值
</script>

-----------------------------------------------

$('').css('color','red')

多个样式操作例如：$('').css({'color':'red', 'background-color':'green'})

*9）jQuery 循环

常用循环代码：

$('').each(function(){

　　操作代码：$(this).操作

})

<body>
<p>ssss</p>
<p>ssss</p>
<p>ssss</p>
<script src="jquery3.6.0.js"></script>
<script>
    arr=[11,22,33];
    // 方式1：
    // $.each(arr,function (x,y) {
    //     document.write(x);//x代表索引
    //     document.write('<br>');
    //     document.write(y);//y代表每个元素
    //     document.write('<br>');
    // })

    //方式2：
    $('p').each(function () {
        console.log(this);//代表遍历标签<p>的集合
        $(this).html('hello');
    })

</script>
</body>

实例：

-正反选

<body>
<button onclick="allSelect()">全选</button>
<button onclick="Cancel()">取消</button>
<button onclick="reverse()">反选</button>
<hr>

<table border="1px">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>
<script src="jquery3.6.0.js"></script>
<script>
function allSelect() {
    $(':checkbox').each(function () {
        $(this).prop('checked',true);
    })
}

function Cancel() {
    $(':checkbox').each(function () {
        $(this).prop('checked',false);
    })
}

function reverse() {
    $(':checkbox').each(function () {
        if ($(this).prop('checked')) {
            $(this).prop('checked',false);
        }
        else{
            $(this).prop('checked',true);
        }
    })
}

</script>
</body>

-模态对话框

    <style>
        .back{
            
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: coral;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
             200px;
            background-color: gold;

        }
    </style>
</head>
<body>
<div class="back">
    <input id="ID1" type="button" value="click" onclick="action1(this)">
</div>

<div class="shade hide"></div>
<div class="models hide">
    <input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>


<script src="jquery3.6.0.js"></script>
<script>
    function action1(self) {
        $(self).parent().siblings().removeClass('hide');
    }

    function action2(self) {
        $(self).parent().addClass('hide').prev().addClass('hide');
        //$(self).parent().parent().children(".models,.shade").addClass("hide") //和上一行代码效果一致
    }
</script>
</body>

10）文档处理

-内部插入（例如：父亲里边插入儿子）

儿子插入父亲中：代码如下：

-（在父亲标签中追加）

1） $('父亲').append(儿子)

2）$('儿子').appendto(父亲)

-（在父亲标签中从最开始加入）：

1）$('父亲').prepend(儿子)

2)$('儿子').prepandto(父亲)

例1:

<head>
    <meta charset="UTF-8">
</head>

<body>
<div class="c1">
    <p>ppp</p>
</div>

<button>add</button>
<script src="jquery3.6.0.js"></script>
<script>
$('button').click(function () {
    // $('.c1').append('<h1>hello world</h1>') 等同于以下代码效果，推荐使用以下代码
    var $ele=$('<h1></h1>');
    $ele.html('hello world');
    $ele.css('color','red');
    $('.c1').append($ele)
　　 //$ele.appendto('.c1') 
})
</script>

jQuery 添加事件的代码：$('').click(function()){

　　具体代码

}

-外部插入（按照兄弟插入）

例子：

<body>
<div class="c1">
    <p>ppp</p>
</div>

<button>add</button>
<script src="jquery3.6.0.js"></script>
<script>
$('button').click(function () {
    var $ele=$('<h1></h1>');
    $ele.html('hello world');
    $ele.css('color','red');
    $('.c1').after($ele)
})
</script>
</body>

-替换

<body>
<div class="c1">
    <p>ppp</p>
</div>

<button>add</button>
<script src="jquery3.6.0.js"></script>
<script>
$('button').click(function () {
    var $ele=$('<h1></h1>');
    $ele.html('hello world');
    $ele.css('color','red');
    $('p').replaceWith($ele)
})
</script>
</body>

-删除

$('').empty() 代表：将标签内容清空

$('').remove() 代表:删除标签

-复制代码：$('').clone()

<body>
<div class="outer">
    <div class="item">
        <button onclick="add(this)">+</button>
        <input type="text">
    </div>
</div>

<script src="jquery3.6.0.js"></script>
<script>
    function add(self) {
        var $s=$(self).parent().clone(); //复制
        $s.children('button').html('-').attr('onclick','remove_obj(this)'); //修改内容以及属性
        $('.outer').append($s);//追加标签
    }

    function remove_obj(self) {
        var s1=$(self).parent().remove()//删除标签
    }
</script>
</body>

11） CSS 操作

位置：

$('').offset().top() 代表距离视口上部的距离

$('').offset().left() 代表距离视口左边的距离

$('').position() 相对于已经定位的父标签的偏移量

$('').scrollTop() 代表滚动滑轮距离最顶部的距离，如果$('').scrollTop(X) 代表距离最顶部的距离是X

$('').scrollLeft()

尺寸：

$('').height() 标签的高度(不包括padding 和border)

$('').width() 标签的宽度(不包括padding 和border)

$('').innerheight() 标签的高度(包括padding）

$('').innerwidth() 标签的宽度(包括padding)

$('').outerheight() 标签的高度（包括padding 和border)

$('').outerheight(true) 标签的高度（包括padding ,border 以及margin)

12）事件绑定

方式一：$('').click(function(){

　　功能代码})

方式二：$('').bind('click',function(){

　　功能代码})

<body>
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>

<script src="jquery3.6.0.js"></script>
<script>
    //绑定事件方式一：
    // $('ul li').click(function () {
    //     alert(123)
    // })

    //绑定事件方式二：
    $('ul li').bind('click',function () {
        alert(666)
    })
</script>
</body>

事件委托：绑定多个事件

body>
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>
<button>add</button>
<script src="jquery3.6.0.js"></script>
<script>
    $('ul').on('click','li',function () {
        alert(666)
    });
    $('button').click(function () {
        var $ele=$('<li>');
        var len=$('ul li').length;
        $ele.html((len+1)*11);
        $('ul').append($ele)
    });

</script>
</body>

解除绑定代码：$('').unblind('click')

页面加载完后再执行代码：

$(document).ready(function(){

　　运行代码})

简写：$(function(){

运行代码})

13）动画效果

显示：代码：$('').show()

隐藏: 代码：$('').hide()

切换:代码：$('').toggle()

<body>
<div>hello</div>
<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<button onclick="f3()">切换</button>
<script src="jquery3.6.0.js"></script>
<script>
function f1() {
    $('div').show(1000)//其中1000是运行次代码时间
}
function f2() {
    $('div').hide(1000)
}
function f3() {
    $('div').toggle()
}
</script>
</body>

滑动

代码：

向下滑动：$('').slideDown()

向上滑动：$('').slideUp()

切换滑动：$('').slideToggle()

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.6.0.js"></script>
    <script>
    $(document).ready(function(){
     $("#slideDown").click(function(){
         $("#content").slideDown(1000);
     });
      $("#slideUp").click(function(){
         $("#content").slideUp(1000);
     });
      $("#slideToggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>

        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            /*display: none;*/
            padding: 50px;
        }
    </style>
</head>
<body>

    <div id="slideDown">出现</div>
    <div id="slideUp">隐藏</div>
    <div id="slideToggle">toggle</div>

    <div id="content">hello world</div>

</body>

淡入淡出

代码：

$('').fadeIn() 淡入

$('').fadeOut()淡出

$('').fadeToggle() 淡入与淡出相切换

$('').fadeTo()

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.6.0.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(2000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(2000);

   });

    $("#toggle").click(function(){
       $("#id1").fadeToggle(2000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.5);

   });
});



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style=" 80px;height: 80px;background-color: blueviolet"></div>

</body>

回调函数例如：

$("#in").click(function(){
    $("#id1").fadeIn(2000,function () {

    alert(666)});


});

扩展方法

用JQuery 写插件时，最核心的两个方法：

- $.extend(object) //为jquery 添加一个静态方法

- $.fn.extend(object) //为jquery实例添加方法

例1:

<script>
    $.extend({
        Myprint:function () {
            console.log("hello")
        }
    });

   $.Myprint();
</script>

例2:

<script>
    $.extend({
        mi:function (a,b) {return a<b ? a : b;},
        ma:function (a,b) {return a>b ? a: b;}
    });
    console.log($.mi(3,4)) //结果是：3
</script>

例3:

<body>
<p>111</p>
<p>222</p>
<p>333</p>
<script>
    // $.extend({
    //     mi:function (a,b) {return a<b ? a : b;},
    //     ma:function (a,b) {return a>b ? a: b;}
    // });
    // alert($.mi(3,4))
    $.fn.extend({
        GetText:function () {
            // for (var i=0;i<this.length;i++){
            //     console.log(this[i].innerHTML)
            // }
            //代码于以下代码功能一样：
            $.each($(this),function (x,y) {

            console.log(y.innerHTML)})
        }
    });
    $('p').GetText()//结果是显示所有p标签的文本内容。
</script>


</body>

相关阅读:
iOS-mac下 svn的使用
 iOS-Model-View-ViewModel & ReactiveCocoa
iOS-通过实现一个TableView来理解iOS UI编程（转）
iOS-细说 iOS 消息推送（转）
【原创】O2O,你真的知道怎么玩吗？
谷歌提升虚拟运营商逼格，传统电信运营商的好日子到头？
【技术贴】大型发布会现场的WiFi网络应该如何搭建？
千万别把WIFI玩坏了！关于WIFI的新鲜玩法和商业模式探讨
 【深度分享】千团大战：看今天商业WiFi乱局及其破解之道
 （转）迎接 Entity Framework 7
原文地址：https://www.cnblogs.com/wode110/p/15212705.html