前端点滴（jQuery）（二）

最新推荐文章于 2022-11-09 23:59:24 发布
最新推荐文章于 2022-11-09 23:59:24 发布
阅读量387 收藏
点赞数
分类专栏： 前端总结 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/errrl/article/details/104117971
版权

jQuery 进阶

一、jQuery 杂项

1. 释放 $

$表示jQuery对象，或者说它表示jQuery函数。使用jQuery必须要使用$符号。

释放$，也就是在使用jQuery的时候，不用$符号。

2. 为什么要释放 $

为了避免冲突，所以要释放$。

有些时候，可能项目中用到的js框架不止一个，其他框架有可能也用$。

有些时候，我们自己定义一个函数，函数名就是$。 这些情况都会和jQuery中的$产生冲突。

3. 如何释放 $

方法一：

/* 使用jQuery中的noConflict()方法 */
var a = jQuery.noConflict();
a(function(){
    a('body').css('background-color','green');
})

方法二：

/* 直接使用jQuery */
jQuery(function(){
    jQuery('body').css('background-color','green');
})

方法三：

/* 使用闭包函数 */
!function($){
    $(function(){
        $('body').css('background-color','green');
    });
}(jQuery)

二、ready 事件的简写形式

1. 原来的形式

$(document).ready(function(){
    //...
})

2. 简化形式

$(function(){
    //...
})

三、ready 事件与 onload 事件的区别

区别一： 执行时机不同。

​ ready事件在页面的dom节点加载完毕就会执行，无需下载图片等资源。

​ onload事件在页面完全加载完毕才会执行，需要页面中所有的资源都下载完毕才会执行。

区别二： 执行次数不同。

​ 默认的onload事件只能执行一个。

​ ready事件，写几个，执行几个。

小例子：

/* 直接使用onload事件，只会执行一次 */
/*window.onload = function(){
    alert(123);
}
window.onload = function(){
    alert(456);
}*/

/* 使用事件监听的方法，会执行多次 */
/*window.addEventListener('load',function(){
    alert(123);
})
window.addEventListener('load',function(){
    alert(456);
})*/

/* jQuery中的ready事件，写几个就执行几个 */
$(function(){
    alert('abc');
})
$(function(){
    alert('efg');
})

四、DOM 对象与 jQuery 对象的区别

DOM对象就是通过纯JS的方式，比如document.getElement(s)By……得到的对象就是DOM对象。

jQuery对象就是通过jQuery方法 $(‘选择器’); 得到的对象。

区别一：

DOM对象能够调用DOM方法，而不能调用jQuery方法；

jQuery对象能够调用jQuery方法，而不能调用DOM方法；

注意： 通过某些手段能够使得DOM对象和jQuery对象发生交互。

区别实例：

$(function(){
    //$('body').append('<input/>');
    //$('body').appendChild('<input/>');
    //后台输出错误信息，说明jQuery对象不能调用DOM方法。
    
    varinput = document.createElement('input');
    //调用DOM对象方法
    //document.body.appendChild(input);
    //调用jQuery方法
    //input.appendTo(document.body);
    //后台输出错误信息，说明DOM对象不能调用jQuery方法。
    
    //通用length属性
    console.log($('body').length);
})

交互实例：

$(function(){
    var input = document.createElement('input');
    
    /* 将jQuery对象转换成DOM对象，可以调用DOM方法 */
    //1.下标的方式。
    $('body')[0].appendChild(input);
    //2.get方法
    $('body').get().appendChild(input);
    
    /* 将DOM对象转换成jQuery对象 */
    //使用$()包裹
    $(input).appendTo(document.body);
})

get()方法的说明：

语法：jQuery对象.get([index])

取得其中一个匹配的元素。 num表示取得第几个匹配的元素。从0开始，返回的是DOM对象，类似的有eq(index),不过eq(index)返回的是jQuery对象。

这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。

五、each 与 map 遍历方法

1. each 方法

语法一：

需要遍历的对象.each(function(i, val){
	//每遍历一次，执行一次该函数
	//形参i，就是每次遍历时对象的下标
	//形参val，就是每次遍历的dom对象
});

语法二：

$.each(需要遍历的对象, function(i, val){
	//每遍历一次执行一次该函数。形参i和val和上面的语法中的一样
});

each用于遍历对象或数组，可以理解为for或for…in循环，但是比for和for…in要强大。

2. map 方法

语法一：

需要遍历的对象.map(function(val){
	//每遍历一次，执行一次该函数
	//形参val，就是每次遍历的dom对象
});

语法二：

$.map(需要遍历的对象, function(val){
	//每遍历一次执行一次该函数。val和上面的语法中的一样
});

3. each 与 map 实例

<ul>
    <li>123</li>
    <li>456</li>
    <li>789</li>
</ul>

/* 要求：点击li，得到对应的下标 */

$(function(){
    var lis = $('li');
	/* 普通的for循环遍历 */
    /*for(var i=0;i<lis.length;i++){
        lis[i].a = i;
        lis[i].onclick = function(){
            console.log(this.a);
        }
    }*/
    
    /* 使用each进行遍历 */
    $.each(lis,function(i,val){
        /*lis.eq(i).click(function(){
            console.log(i)
        })*/
        $(val).click(function(){
            console.log(i);
        })
    })
    
    /* 使用map进行遍历,遍历不出下标 */
    /*$.map(lis, function (i, val) {
         $(val).click(function () {
            console.log(i);//报错，因为map只能遍历出元素，不能遍历出元素的下标
         })
     })*/
})

六、jQuery 中的事件绑定

1. 普通事件

普通事件，比如：click、mouseover、mouseenter、hover、mouseout、mouseleave、change、blur…等

语法：$('选择器').普通事件([data],fn)

1. 事件方法没有参数data，fn可用作传递事件
<form action="">
    <input type="file" name="file" style="display:none;"></input>
    <input type="button" value="选择文件"></input>
</form>

$(function(){
    $("input[type='button']").click(function(){
        /* 事件的传递 */
        $("input[type='file']").click();
    })
})
2. 给事件传递数据data，可以通过事件对象获取data中的属性
$(function(){
    $("input[type='button']").click({name:'yaodao',age:20},function(evt){
        /* 获取data中的属性 */
        console.log(evt.data);
        console.log(evt.data.name);
    })
})

2. on 绑定事件

1.使用on绑定事件具有事件委托的作用。

实际上就是父元素绑定的属性，子元素也存在。

语法：$(父级元素).on(事件类型,子元素,处理函数);

<p>hello</p>

$(function(){
    /* 给整一个文档子元素p的click事件 */
    $(document).on('click','p',function(){
        $('<p>我是后来的p</p>').appendTo($('body'));
    })
})

实用性：给未来的元素绑定事件（事件委托）常用于给Ajax返回的数据添加事件。

2. 给一个元素绑定多个同类型（不同类型）的事件
<p>hello</p>

/* 不使用on也可以实现同样的功能 */
$(function(){
    /*$('p').mouseover(function(){
        console.log('mouseover');
    });
    $('p').click(function(){
        console.log('click');
    });*/
    
    //链式操作
    $('p').mouseover(function(){
        console.log('mouseover');
    }).click(function(){
        console.log('click')
    })
})

/* 使用on实现绑定不同类型的事件 */
$(function(){
    /*$(document).on('mouseover','p',function(){
    	console.log('mouseover');
    })
    $(document).on('click','p',function(){
    	console.log('click');
    });*/
    
    //链式操作,以一个对象的形式绑定事件
    $('p').on({
        mouseover:function(){
            console.log('mouseover');
        },
   		click:function(){
            console.log('click');
        }
    })
    
    /* 当on绑定同一事件，还可以为事件添加一个标志，以用于区分 */
    /*$(document).on('click:first','p',function(){
    	console.log('mouseover');
    })
    $(document).on('click:second','p',function(){
    	console.log('click');
    });*/
})

1.7版本及之后，可使用on来完成事件委托；1.7之前的版本可以使用live或bind来完成事件委托

3. one 事件

给元素绑定的事件（不过绑定多少事件），都只执行一次。

<p>hello</p>

$(function(){
    /* 写法一 */
	$('p').one('click',function(){
        console.log('hello');
    })
    /* 写法二 */
    /*$(document).one('click','p',function(){
        console.log('hello');
    })*/
    
    /* 绑定多事件，也只是执行一次 */
    $('p').one({
        mouseover:function(){
            console.log('mouseover');
        },
        click:function(){
            console.log('click');
        }
    })
})

4. off 取消事件

用于取消元素的某个事件。

实际开发中，这个东西很有用，有些时候是需要先取消掉一个元素的所有事件，然后在绑定你要绑定的事件，可以解决一些bug。

<p>hello</p>

$(function(){
    $('p').on({
        mouseover:function(){
            console.log(1);
        },
        click:function(){
            console.log(2);
        }
    });
    /* 取消事件 */
    /* 注意：如果off不填参数，表示取消掉p的所有事件绑定，所以要加上指定的事件。 */
    $('p').off('mouseover').click(function(){
        console.log(0);
    })
})

off和on一组的，都是3.0版本后存在，3.0版本之前，可以使用unbind事件来完成事件的取消工作。

七、jQuery 中的 Ajax

1. $.get()方法

语法：

$.get(url, data, function(e){
	//e就是服务器返回的数据
}, dataType);

四个参数：

  • url：请求地址。

  • data：发送给服务器的数据，字符串的形式或对象的形式。

  • fn：用于处理服务器返回的数据，形参e就是服务器返回的数据。

  • dataType：表示服务器返回数据的类型（text/json/html/script/_default）

HTML

<input type="button" value="点击发送请求"></input><span></span>

JavaScript

$(function(){
    $("input[type='button']").click(function(){
        $.get('01get.php',{name:'yaodao',age:20,sex:'male'},function(res){
    $('span').text(res);        
        })
    })
})

PHP（01get.php）

<?php
    //接受发送过来的数据，进行保存
    file_put_contents('get.txt',print_r($_GET,true));
	// 响应一个数据
	echo 123;

效果：
在这里插入图片描述

2. $.post()方法

语法：

$.post(url, data, function(e){
	//e就是服务器返回的数据
}, dataType);

四个参数：

  • url：请求地址。
  • data：发送给服务器的数据，字符串的形式或对象的形式。
  • fn：用于处理服务器返回的数据，形参e就是服务器返回的数据。
  • dataType：表示服务器返回数据的类型（text/json/html/script/_default）

HTML

<input type="button" value="点击发送请求"></input><span></span>

JavaScript

$(function(){
    $("input[type='button']").click(function(){
        $.post('01get.php',{name:'yaodao',age:20,sex:'male'},function(res){
    $('span').text(res);        
        },'text')
    })
})

PHP（02.post.php）

<?php
    //接受发送过来的数据，进行保存
    file_put_contents('get.txt',print_r($_GET,true));
	// 响应一个数据
	echo 45678;

服务器返回JSON格式的数据：

JS代码，需要修改get或post方法的第4个参数为json，修改之后，接收到的数据，jQuery会自动将其转换为JS能够识别的数组或对象。但是php需要将数据转换成json格式的数据。

JavaScript

$(function(){
    $("input[type='button']").click(function(){
        $.post('01get.php',{name:'yaodao',age:20,sex:'male'},function(res){
    console.log(res);       
        },'json')
    })
})

PHP（02.post.php）

<?php
	//接受发送过来的数据，进行保存
	file_put_contents('post.text',print_r($_POST,true));
	//响应一个数据
	//echo 45678;

	//返回一个json格式的数据
	$arr = [
    	['id'=>1,'name'=>'张三'],
    	['id'=>2,'name'=>'李四'],
    	['id'=>3,'name'=>'王五'],
    	['id'=>4,'name'=>'老六']
	];
	echo json_encode($arr);

输出结果：
在这里插入图片描述

3. $.ajax()方法

语法：

$.ajax({
	type:'get', //或者post
	url:'',
	data:{}, //发送给服务器的数据
	dataType:'json', //服务器返回数据的类型
	success:function(e){
		//形参e仍然是服务器返回的数据
	},
	error:function(){
		//ajax执行出错，在这里处理
	},
	async:false //表示同步请求，默认为true表示异步请求
	});

HTML

<input type="button" value="点击发送请求"></input><span></span>

JavaScript

$(function(){
    $("input[type='button']").click(function(){
        $.ajax({
            type:'post',
            url:'02.post.php',
            data:{name:'yaodao',age:20,sex:'male'},
            dataType:'json',
            success:function(res){
                console.log(res);
            }
        });
    });
});

PHP（02.post.php）

<?php
	//接受发送过来的数据，进行保存
	file_put_contents('post.text',print_r($_POST,true));
	//响应一个数据
	//echo 45678;

	//返回一个json格式的数据
	$arr = [
    	['id'=>1,'name'=>'张三'],
    	['id'=>2,'name'=>'李四'],
    	['id'=>3,'name'=>'王五'],
    	['id'=>4,'name'=>'老六']
	];
	echo json_encode($arr);

效果：
在这里插入图片描述

4. 搜集表单信息方法

使用方法：

$(表单).serialize(); 返回一个经过编码的字符串。

$(表单).serializeArray(); 返回一个JS数组。

二者收集到的数据都可以直接用于Ajax。

HTML

<form name="myform">
    用户名：<input type="text" name="username"><br>
    密　码：<input type="password" name="pwd"><br>
    性　别：
    <input type="radio" name="sex" value="男" checked>男
    <input type="radio" name="sex" value="女" >女<br>
    爱　好：
    <input type="checkbox" name="hobby[]" value="吃饭">吃饭
    <input type="checkbox" name="hobby[]" value="睡觉">睡觉
    <input type="checkbox" name="hobby[]" value="看书">看书<br>
    图　片：<input type="file" name="pic"><br>
    地　址：
    <select name="address">
        <option value="北京">北京</option>
        <option value="广东">广东</option>
        <option value="天津">天津</option>
    </select>
    <br>
    简　介：<textarea name="introduce" cols="45" rows="3"></textarea><br>
    <input type="button" value="提交" id="btn">
</form>

JavaScript

$(function(){
    $("input[type='button']").click(function(){
        var d = $('form').serialize();//返回一个经过编码的字符串。
        console.log(d);
        var d2 = $('form').serializeArray();//返回一个JS数组。
        console.log(d2);
        $.ajax({
            type:'post',
            url:'04serialize.php',
            data:d,
            dataType:'text',
            success:function(res){
                console.log(res);
            }
        });
    });
});

PHP（04serialize.php）

<?php
	file_put_contents('serialize.txt',print_r($_POST,true));
	echo 123;

输出结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fCndaGdB-1580384064981)(G:\java\blog\Snipaste_2020-01-30_19-24-22.png)]

5. Ajax 提示方法

  • ajaxStart()：在ajax开始之后，会执行

  • ajaxStop()：在ajax结束时执行。

ps：低版本的写法是手册上的写法，高版本的jQuery写法如下：

HTML

<input type="button" value="发送请求">
<div id="loading" style="display: none;">玩命加载中...</div>

JavaScript

$(function(){
            $('input').click(function(){
                $.get('05ajaxStartandajaxStop.php',{}, function(e){
                    console.log(123);
                }, 'text');
            });

            //发送ajax开始，给一个提示
            $(document).ajaxStart(function(){
                $('#loading').show();
            });
            $(document).ajaxStop(function(){
                $('#loading').hide();
            });
        });

PHP（05ajaxStartandajaxStop.php）

<?php
	sleep(2);//睡眠2秒

效果：

在这里插入图片描述

全干丶
关注
专栏目录
前端做登录验证码功能的理解
m0_48940868的博客
11-14 2450
前言 前端小白一名，记录日常学习生活点滴【第二周】 一、关于 前端做登录验证码功能的个人理解 做这个功能之前一定要搞清楚它的作用是什么： 【用它来确定正在访问网站的用户是人而不是一个程序】 原因：不管是何种验证码方式，都是要让程序难以判断，而让人好判断的原则设计的。 【防止用户利用机器人自动注册、登录、灌水】 原因：安全角度出发，随着网络速度的提高，如果没有一种防御机制的话，那么攻击者完全可以通过疯狂猜测尝试来获得用户的密码，还可以利用机器人自动注册、登录、灌水。想想多可怕。 一般来说，前端做登录验证就大
电商前端工程师：国内WEB前端开发经验之路
09-01 2046
一直想写这篇“十日谈”，聊聊我对Web前端开发的体会，顺便解答下周围不少人的困惑和迷惘。我不打算聊太多技术，我想，通过技术的历练，得到的反思应当更重要。 　　我一直认为自己是“初级”前端开发工程师，一方面我入道尚浅，只有短短几年，另一方面我自知对技术的钻研并不深入，可能是由于环境的原因，当然最重要的是，我幸运的参与到互联网崛起的浪潮之巅。时势造就了一批技能薄弱但备受追捧的“弄潮者”，这在很大
纯JS实现排列整齐的数据表格
Heroson_Chow的博客
12-11 2124
纯JS实现排列整齐的数据表格
JS 数组Map的用法
℡メ㏑╭ァ小凯
11-09 328
【代码】JS 数组Map的用法。
jquery删除表单动态添加的某一行
hbjiankely的博客
08-27 942
jQuery删除表单某一行报错 先删除第一行，可正常删除，再删除第三行报错 js代码 delete: function (index, fn) { rows.map(function (item, i) { if (i > index) { fn && fn(item, --i); ...
数据处理
Var_YanGuangYing
11-29 285
map
2021-06-03
weixin_54097883的博客
06-03 165
EXCEL导入导出并展示数据详解 前言 前端程序员在做管理系统时，经常会需要做“excel表格的导入与导出”这一功能模块。 excel表格导入 下载xlsx第三方包 npm i xlsx 为了方便维护和复用，在做这种可能多次使用的功能模块时，使用ele-ment组件新建一个公共的导入页面组件，全局注册并正确挂载至路由，导入的模块代码引用：https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/Uplo
TravelNotes:旅行足迹系统，后端为JavaMVC，前端AMapAPI+HTML+jQuery
04-28
后端基于Java MVC架构开发，前端基于HTML+AMapAPI+JavaScript+jquery 该项目为本科课程设计，开发较紧促，若有细节Bug或其他问题可私信指出 项目在线演示地址： 生成环境 CentOS 7 JDK1.8 Tomcat 9.0.30 MySQL 5.6 ...
jQuery仿QQ空间说说发表评论留言代码.zip
最新发布
06-03
jQuery仿QQ空间说说发表评论留言代码.zip 是一个基于jQuery库的仿QQ空间发表说说和评论功能的前端代码资源。该资源包含了实现这一功能所需的HTML、CSS和JavaScript文件，以及相关的图片资源。用户可以通过下载并解压...
前端日常进阶随笔笔记 - JS常用方法解析
这个资源的标题“前端进阶 - 随笔”意味着它是一个关于前端开发进阶知识的个人笔记集合，覆盖了作者在日常工作中积累的点滴经验。 描述中的“前端日常进阶笔记”表明了这个资源包含了作者在前端领域每日积累的知识...
map显示数组所有id和名字
Web_Notes的博客
06-14 374
map显示数组所有id和名字
map中使用async await
zlcfire的博客
07-06 3876
##map中使用async await map函数里面的方法是同步的，异步请求用async await getList() { this.loading = true; listInquiry(this.queryParams).then(response => { //添加Promise.all是因为return返回的是数组形式的Promise Promise.all( response.rows.map(async it
Vue数组对象去重
wang_zhiwei0728的博客
11-22 478
TreeList({ parentId: this.chuanshu }).then((res) => { let arr1 = this.unique(res.rows.map((item) => { return item; }) ); this.checkboxList = arr1; }); unique(arr) { const res = new Map(); ...
golang语言sql Rows转化保存成map
热门推荐
王能的小屋
06-06 1万+
当我们用sql查出数据时，第一个问题当然是如何将rows转成map集合了，不多说直接上代码 func DoQuery(db *sql.DB, sqlInfo string, args ...interface{}) ([]map[string]interface{}, error) { rows, err := db.Query(sqlInfo, args...) if err != n...
了解React.js中数组子项的唯一键
asdfgh0077的博客
04-24 400
I'm building a React component that accepts a JSON data source and creates a sortable table. 我正在构建一
多数据源分页查询
dainandainan1的博客
07-08 2666
多数据源归并分页： 请求链接为：/user/holding/list?userId={}&rows={}&limitTime={} limitTime：代表最后一条的时间 从A、B中各取N条数据，合并后取时间戳最大的前N条，核心代码如下： List<Resp> queryPagedListByLimitTime(long userId, int rows, long limitTime) { List<Resp> totalList = new Ar
前端练习21 后端数据处理
多啦的博客
12-18 848
知识点 分析数据结构 数组的reduce方法 题目 从某数据库接口得到如下值： { rows: [ [&quot;Lisa&quot;, 16, &quot;Female&quot;, &quot;2000-12-01&quot;], [&quot;Bob&quot;, 22, &quot;Male&quot;, &quot;1996-01-21&quot;] ], metaDat
Golang读取Rows到map[string]interface{}中
逝无痕——kaidy
07-14 1700
文章目录 func DoQuery(db *sql.DB, sqlInfo string, args ...interface{}) ([]map[string]interface{}, error) { rows, err := db.Query(sqlInfo, args...) if err != nil { return nil, err } columns, _ := rows.Columns() columnLength := len(columns) cache := make
《jQuery：新手到高手》学习指南
附录部分提供了参考材料、JavaScript的点滴知识和插件开发助手，帮助读者进一步扩展jQuery技能。 这本书适合已经有一定HTML和CSS基础，希望提升网页交互性的开发者阅读。通过深入学习，读者可以掌握创建动态、响应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值