jQuery学习笔记

最新推荐文章于 2023-01-04 15:09:22 发布

以全速前进

最新推荐文章于 2023-01-04 15:09:22 发布

阅读量246

点赞数

分类专栏：笔记文章标签： javascript jquery

本文链接：https://blog.csdn.net/deansensitive/article/details/110095300

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.初识jQuery

引入jQuery

本地引入
```
<script src="jquery.min.js"></script>
```

cdn引入

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

1.1 第一个jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button>say hello</button>
<script>
    $('button').click(function () {
        alert("hello jQuery");
    });
</script>
</body>
</html>

jQuery选择器的基本语法格式如下：

$(selector);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<!--<style>-->
<!--    #myDiv{-->
<!--        border: 2px solid black;-->
<!--    }-->
<!--</style>-->
<body>
<button>say hello</button>
<div id="myDiv">我是一个div</div>
<script>
    $('button').click(function () {
        alert("hello jQuery");
    });
    $('#myDiv').css('border','1px solid black');
</script>
</body>
</html>

2. jQuery选择器

2.1. jQuery选择器的优势

不适用jQuery选择器的情况下，开发者经常使用javascript来获取DOM元素，如下：

document.getElementById();
document.getElementByName();

与上述代码不同，JQuery选择器去元素对象的方式更加简洁

$('#id的值')

$('元素的名称')

不仅为了简化JavaScript的写法，也是由于JavaScript提供的选择DOM较少，难以满足开的众多需求

jQuery选择器分为 *基本选择器，层次选择器，过滤选择器

2.2. 三种选择器

基本选择器

选择器	描述	返回值
#id	id选择器，根据id匹配一个元素	单个元素
.cass	类选择器，根据类名匹配元素	元素集合
element	元素选择器，根据元素名匹配所有元素	元素集合
*	通配符选择器，匹配所有元素	元素集合
selector1,selector2,selector3 selectorN	同时获取多个元素	元素集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        div{
            border: 1px solid black;
        }

    </style>
</head>
<body>
<div id="byId">第一个div元素，ID为bydiv</div>
<p>第一个p元素</p>
<p class="byClass">第2个p元素，类名为byClass</p>
<div class="byClass">第二个div元素，类名为byClass</div>
<script>
    $('div').css('background','yellow');
</script>
</body>
</html>

层次选择器

层次是指DOM元素的层次关系。按照层次结构可以获取指定DOM的子元素，后代元素，兄弟元素，父元素等。

选择器	描述	返回值
parent>child	子元素选择器，根据父元素匹配所有的子元素	元素集合
selector selector1	后代选择器，根据祖先元素（selector）匹配所有的后代元素（selector1）	元素集合
prev+next	兄弟选择器，匹配prev元素紧邻的兄弟元素	元素集合
prev~siblings	兄弟选择器，匹配prev元素后的所有兄弟元素	元素集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="dv">
    <p>这是div中的第1个p元素</p>
    <ul>
        <li>这是第1个li元素</li>
        <li><p>这是第2个li元素中的p元素</p></li>
    </ul>
    <p>这是div中的第2个p元素</p>
</div>
<p>这是div后面的第1个p元素</p>
<p>这是div后面的第2个p元素</p>
<p>这是div后面的第3个p元素</p>
</body>
<script>
    // $('#dv>p').css('background','red'); // $('#dv').children('p').css('background','red');
    // $('#dv p').css('background','blue');//  $('#dv').find('p').css('background','blue');
     $('#dv+p').css('background','yellow');
    $('#dv~p').css('background','pink');
</script>
</html>

过滤选择器

过滤器选择器通常以":“开头，”:"后面用于指定过滤规则

例如：“:first”用于获取第一个元素。

基本过滤选择器

选择器
:first	获取第一个元素
:last	获取最后一个元素
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:header
:animated

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本过滤选择器</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul style="width: 200px">
    <li>两只老虎</li>
    <li>两只老虎</li>
    <li>一只没有尾巴</li>
    <li>一直没有眼睛</li>
</ul>
<script>
    $('li:even').css('background','pink');
    $('li:odd').css('border','solid 1px black');
</script>
</body>
</html>

3.jQuery操作DOM

3.1 操作元素样式

3.1.1操作样式属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div style="color: aquamarine;font-size: 50px;font-family: '楷体'">
    越努力，越幸运
</div>
<input id="btn" type="button" value="设置样式">
<div id="ttt"></div>
<script>
    //获取多个属性的值
    var obj=$('div').css(['color','font-family','font-size']);
    //在控制台查看
    console.log(obj);
    //设置单个属性
    $('div').css('color','yellow');
    //设置多个属性
    $('div').css({'font-family':'宋体',
                 'font-size':'100px'});
    //设置多个样式
    $('#btn').click(function () {
        $('#ttt').css({
            backgroundColor:'pink',
            width:'200px',
            height:'200px',
            borderRadius:'50%'
        });
    });

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

3.1.2 操作元素类

方法	描述
addClass()	将指定的类添加到匹配元素中
removeClass()	从所有的元素中删除全部或者指定的类
toggleClass()	对设置或移除被选元素的一个或多个类进行切换
hasClass()	确定是否有匹配的元素被分配了给定的类

$(selector).addClass(‘c’);

3.1.3 操作元素的尺寸

jQuery操作元素尺寸的方法

方法	描述
width()	获取或设置元素的宽度
height()	获取或设置元素的高度
innerWidth()	获取元素的宽度（包括内边距）
innerHeight()	获取元素的高度（包括内边距）
outerWidth()	获取元素的宽度（包括内边距和边框）
outerHeight()	获取元素的高度（包括内边距和边框）
outerWidth(true)	获取元素的宽度（包括内边距，边框，和外边框）
outerHeight(true)	获取元素的高度（包括内边距，边框，和外边框）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: #b300ff;
            border-radius: 25%;
            color: aliceblue;
            text-align: center;
            padding: 10px;
            line-height: 25px;
        }
    </style>
</head>

<body>
<input  id="btn" type="button" value="按钮">
<div>
    happy
</div>
<script>
    $('#btn').click(function () {
        if ($('div').width()<300){
            $('div').css('background','blue');
            $('div').css('color',' aliceblue');
            $('div').width($('div').width()+50);
            $('div').height($('div').height()+50);
        }
        else {
            $('div').css({
                'background':'pink',
                'color':'black'
            });
            $('div').width($('div').width()-50);
            $('div').height($('div').height()-50);
        }
    });
</script>
</body>
</html>

4. jQuery事件处理机制

4.1 常用事件

4.1.1 jQuery事件

jQuery允许为同一个对象的的同一个事件绑定多个事件处理函数

4.1.2 事件页面加载

由于onload事件需要在页面的所有内容都加载完后才触发，为了提高网页的响应速度，jQuery提供了ready事件作为页面的加载事件。只需要页面的DOM元素加载完全后便可触发。语法如下：

//写法1
$(document).ready(funtion(){
                  //页面加载后要执行的代码
                  });

//写法2
$(funtion(){
                  //页面加载后要执行的代码
                 });

document参数可以省略，写法2比较简洁，所以实际开发中用到的频率较高。

一个页面可以包含多个ready事件，但是一个页面只能编写一个onload事件

4.1.3 鼠标事件

事件	描述
click	单击鼠标左键是触发
dbclick	双击鼠标左键时触发
mousedown	按下鼠标时触发
mouseup	松开鼠标时触发
mouseover	鼠标指针移入目标元素或其子元素都会触发的事件
mouseout	鼠标指针移出目标元素或其子元素都会触发的事件
mouseenter	鼠标指针移入目标元素触发的事件
mouseleaver	鼠标指针移出目标元素事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mouseout</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        div {
            background-color: pink;
            padding: 20px;
            margin: 30px;
            width: 350px;
            height: 100px;
        }

        p {
            margin: 20px;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="dv">
    <h3 style="background-color: white;">
        mouseout 事件触发<span id="mOut">0</span>次</br>
        mouseleave 事件触发<span id="mLeave">0</span>次
    </h3>
</div>

<script>
    var x = 0;
    var y = 0;
    $('div.dv').mouseout(function () {
        $('#mOut').text(x += 1);
    });
    $('div.dv').mouseleave(function () {
        $('#mLeave').text(y += 1);
    });
</script>
</body>
</html>

项目中经常需要对鼠标的移入和移除操作进行处理，为此，jQuery中提供了hover()语法，格式如下：

$( selector ).hover( handlerIn, handlerOut )

4.1.4 焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点事件</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h2>
    输入框：<input type="text">
</h2>
<script>
    //获得焦点
    $('input').focus(function () {
        $('input').css('background-color','pink');
    });
    //失去焦点
    $('input').blur(function () {
        $('input').css('background-color','yellow');
    });
</script>
</body>
</html>

4.1.5 改变事件

在实际开发中经常用到监控表单元素的内容是否改变，可以使用jQuery提供的change事件，**该事件仅适用于input,textarea,select元素控件。**例如，文本框，单选按钮，下拉框等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变事件</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p>昵称：<input type="text" class="info"></p>
<p>密码：<input type="password" class="info"></p>
<p>
    <select class="info" name="male" id="">
        <option value="boy">男</option>
        <option value="girl" selected>女</option>
    </select>
</p>
<script>
    $('.info').change(function () {
        $(this).css('background-color','pink')
    });
</script>
</body>
</html>

4.2 事件绑定与事件解绑

除了使用事件方法绑定事件，jQuery提供了3种功能更灵活的事件绑定方式

on(), bind() delegate()

接触绑定方式
off() unbind() undelegate()

4.2.1 事件绑定

语法如下:

$(selector).on(event,childSelector,data,function);

参数	描述
event	必须，事件类型，如click，change，mouseover
childSelector	可选，要绑定一个或多个子元素
data	可选，传入事件处理函数的数据，可通过“事件对象.data”获取到参数值
function	必须，事件触发运行的事件处理函数

1.绑定事件

    $('#btn').on('click',function () {
        alert("点击了");
    });

2.多个事件使用相同的事件处理函数

 $('#btn2').on('mouseover mouseout',function () {
        $(this).css('background-color','pink');
    })

3.绑定多个事件

$('#btn3').on({'click':function () {
            $(this).css('backgroundColor','pink');
        },'mouseout':function () {
            $(this).css('backgroundColor','yellow');
        }});

4事件解绑

    $('#btn5').on('click','p',function () {
        $(this).css('background-color','#6aa9e1');
    });
    $('#btn5').on('click',function () {
       $('<p>第一个p</p>').appendTo($('#dv'));
    });

4.2.2 事件解绑

6. jQuery的Ajax操作

6.1 Ajax简介

6.1.1 什么是Ajax

Ajax全称是Asynchronous JavaScript ans XML.即异步的JavaScript和XML。

6.2 jQuery的Ajax操作

6.2.1 加载HTML内容

1.基本语法：

load(url,[data],[callback])

参数	描述
url	必须，规定加载资源路径
data	可选，发送至服务器的数据
callback	可选，请求完成时执行的函数

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button id="btnLoad">加载数据</button>
<div id="box"></div>
<script>
    $('#btnLoad').click(function () {
        $('#box').load('demo3-6.html');
    });
</script>
</body>
</html>

2.请求地址后面加上标签的选择器div,这样在点击加载后只会显示div标签的内容：

$('#box').load('demo3-6.html div');

3.向服务器发送数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button id="btnLoad">加载数据</button>
<div id="box"></div>
<script>
    $('#btnLoad').click(function () {
        $('#box').load('demo3-6.html',{name:'小明',age:'11'});
    });
</script>
</body>
</html>

6…2.2 发送GET和POST请求

$.get()

$.get(url,[data],[function(data,status,xhr)],[dataType])

参数	描述
url	必须，规定加载资源的路径
data	可选，发送至服务器的数据
function(data,status,xhr)	可选，请求成功时执行的函数\|data：表示从服务器返回的数据status：请求的状态值 xhr：XMLHttpRequest对象
dataType	可选，预期服务器相应的数据类型（xml,json,html,script,jsonp）

url必选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
    $('#btn').click(function () {
        $.get('demo3-6.html',function (data) {
            $('#box').html(data);
        },'html');
    });
</script>
</body>
</html>

6.2.3 数据格式处理

常见的数据格式：

XML
JSON
TEXT

xml数据格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button id="btnLoad">加载数据</button>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>书名</th>
        <th>作者</th>
        <th>价格</th>
    </tr>
</table>
<script>
    $('#btnLoad').click(function () {
        //在控制台查看
        $.get('target.xml',
            function (data) {console.log(data);},
            'xml');
        //提取xml，并显示到网页。
        $.get('target.xml',function (data,status,xhr) {
            var html='';
            $(data).find('book').each(function (index,ele) {
               html+='<tr>';
               $(ele).children().each(function (index,ele) {
                   html+='<td>'+$(ele).text()+'</td>';
               })
                html+='</tr>';
            });
            console.log(html);
            $('#dataTable').append(html);
        },'xml');
    });
</script>
</body>
</html>

6.2.4 获取JSON数据

语法：

$.getJSON(url,[data],[callback])

$.getJSON('target.json',function (data,status,xhr) {
            var html='';
            for (var book in data){
                html+='<tr>';
               for(var key in data[book]){
                   html+='<td>'+data[book][key]+'</td>';
               }
               html+='</tr>'
            }
            $('#dataTable').append(html);
        });

6.2.5 获取JavaScript代码并执行

语法：

$.getScript(url,[callback])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
    $('#btn').click(function () {
        $.getScript('../lib/createEle.js',function () {
           var styleObj={
               width:'100px',
               height:'100px',
               background:'blue'
           };
           var divBox=createEle('div',styleObj);
           $('body').append(divBox);
        });
    });
</script>
</body>
</html>

以全速前进

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记

初识jQuery引入jQuery本地引入<script src="jquery.min.js"></script>cdn引入<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>第一个jQuery<!DOCTYPE html><html lang="en"><head> <met
复制链接

扫一扫