JavaScript新手经常遇到的问题(二)
1、Form表单只提交数据而不进行页面跳转的方法
<form id="form1" method="post" onsubmit="return saveReport();"> function saveReport() {
$("#form1").ajaxSubmit(function(message) {
// 对于表单提交成功后处理,message为提交页面saveReport.htm的返回内容
});
return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转
}
2、如果要用jq来实现DOM对象的话,需要加个下标
$("#id")是jquary对象,他实际是一个数组对象,他实际是一个数组对象;document.getElementById("id"),它是一个DOM对象 ,可进行DOM操作;
如果要用jq来实现DOM对象的话,需要加个下标。
var docObj = ("#files")[0];//实现dom对象
docObj .innerHTML = "";//jq来操作
注:var docObj = document.getElementById("files"),和$("#files")[0]效果一样
4、jQuery对 动态添加 的元素 绑定事件on()的用法
(1)$(选择器).click(fn)
当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。
(2)$(document).on('click','要选择的元素',function(){})
on方法包含很多事件,点击,双击等等事件。和$().click()的用法一样,最大的区别是动态创建的元素在该选择器选中范围内是能触发回调函数。 也就是说 页面上元素有添加或变化后仍可绑定
5、闭包
闭包概念:当一个内部函数被调用,就会形成闭包,闭包就是能够读取其他函数内部变量的函数。
不使用闭包,点击事件的函数内部使用外部的变量i一直在变化,当我们指定click事件时并没有保存i的副本
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
divs[i].onclick=function(){
alert(i);
}
}
使用闭包
//闭包
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
divs[i].onclick=(function(n){
return function(){
alert(n);
}
})(i);
} //第二种方法(推荐)
for(var i=0; i<$("div").length; i++){
$("div")[i].onclick=(function(n){
return function(){
alert(n);
}
})(i)
}
7、阻止移动端浏览器点击图片会预览的几种方法
(1)在img元素上添加 οnclick="return false"
<img src="a.png" onclick="return false" />
(2)CSS方式,图片用背景图的方式插入
background:url(a.png) norepeat center;
(3)使用js事件阻止默认行为的方法,这里需要注意哦!
var img = document.getElementById('banner');
img.addEventListener('click',function(e){
e.preventDefault();
});
8、ajax
$.ajax({
url:"/Hello/zuoYe02",
type:"POST",
//发送到服务器的数据
data:JSON.stringify(emp),
//发送信息至服务器时内容编码类型。
contentType : "application/json;charset=UTF-8",
//预期服务器返回的数据类型;返回的数据类型可以不写,默认接收所有,ajax会自动识别
dataType:"json",
success:function (data) { }
})
9、select获取值
<select id="sel">
<option value="珠海">珠海</option>//value必须有当前的值
<option value="云浮">云浮</option>
</select> var sel=$('#sel').val();
alert(sel); //输出:珠海
10、通过jq设置不可点击
$(this).attr("disabled",true);
$(this).css("cursor","not-allowed");
11、点击获取当前元素的下标
点击列表项可获得其相对于同胞元素的 index 位置,元素必须是相邻的
$("li").click(function(){
alert($(this).index());
});
12、函数的可变参数
function sum(...itme) {
console.log(itme);//这里输出的数组
}
sum(1,2,3,4,5,6);
JavaScript新手经常遇到的问题(二)的更多相关文章
- 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- 我要成为前端工程师!给 JavaScript 新手的建议与学习资源整理
来源于:http://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx 今年有 ...
- JavaScript学习笔记之数组(二)
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
- 【JavaScript】Leetcode每日一题-二叉搜索树的范围和
[JavaScript]Leetcode每日一题-二叉搜索树的范围和 [题目描述] 给定二叉搜索树的根结点 root,返回值位于范围 [low, high] 之间的所有结点的值的和. 示例1: 输入: ...
- SuperMap iClient for JavaScript 新手入门
地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,是用于输入.存储.查询.分析和显示地理数 ...
- javascript oop深入学习笔记(二)--javascript的函数
一.概述: 函数是进行模块化程序设计的基础, javascript重的的函数不同于其他语言,每个函数都作为一个对象被维护和运行.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或则讲函数作为参 ...
- 高德地图 JavaScript API 开发系列教程(二)
上节简单介绍高德地图JavaScript API及网页中基本地图展示.有了地图后我们可以用来做什么?有人说离我最近的超市在哪里,我怎么去?别急,这些功能我们后面都会慢慢实现.今天为大家详细讲解如何在地 ...
- javascript第二遍基础学习笔记(二)
一.操作符 1.一元操作符: 自加自减(分前置和后置2种):++.-- 区别:前置的先自加或自减,后进行计算:而后置的是先进行计算,后自加或自减(在其会产生负面影响时才能体现区别): ; i++; / ...
- 【2】JavaScript编程全解笔记(二)
你过去的种种经历,就像人生的一颗颗珍珠,在未来的某一天,你找到了那根线,你就会把她们串联起来,变成美丽的项链. 第八章 客户端 JavaScript 与 HTML 1. 浏览器渲染页面的步骤 2. ...
随机推荐
- Netty启动流程剖析
编者注:Netty是Java领域有名的开源网络库,特点是高性能和高扩展性,因此很多流行的框架都是基于它来构建的,比如我们熟知的Dubbo.Rocketmq.Hadoop等,针对高性能RPC,一般都是基 ...
- vue+element UI以组件递归方式实现多级导航菜单
介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...
- ubuntu中nfs安装
Ubuntu Nfs服务器安装 nfs服务器在嵌入式开发中非常常用,可以实现主机和开发板共享文件. 1.安装软件包 sudo apt-get install nfs-common nfs- ...
- PHP array_multisort实现二维数组排序
PHP array_multisort实现二维数组排序 参数中的数组被当成一个表的列并以行来进行排序 - 这类似 SQL 的 ORDER BY 子句的功能.第一个数组是要排序的主要数组.数组中的行(值 ...
- C语言程序设计100例之(10):最大公约数
例10 最大公约数 问题描述 有三个正整数a,b,c(0<a,b,c<10^6),其中c不等于b.若a和c的最大公约数为b,现已知a和b,求满足条件的最小的c. 输入数据 第 ...
- Spring 框架常用语法进行总结
Spring 框架常用语法进行总结: spring框架的二大主要的功能就是IOC和AOP. IOC: 控制反转(依赖注入) AOP: 面向切面编程 学习spring最好的方法就是去看官网,里面有详细的 ...
- Python字典 你必须知道的用法系列
本文Python版本为3.7.X,阅读本文之前需了解python字典的基本用法. 介绍 字典(dict)是Python中内置的一个数据结构,由多个键值对组成,键(key)和值(value)用冒号分隔, ...
- java多线程回顾3:线程安全
1.线程安全问题 关于线程安全问题,有一个经典案例:银行取钱问题. 假设有一个账户,有两个线程从账户里取钱,如果余额大于取钱金额,则取钱成功,反之则失败. 下面来看下线程不安全的程序会出什么问题. 账 ...
- 解决 scp 和rsync 同步失败【rsync error: unexplained error (code 255) at io.c(226) [sender=3.1.2]】
解决 scp 和rsync 同步失败 报错信息截图: 解决问题的步骤: 1.检查对方的scp和rsync 是否能使用. rsync 在使用的时候,需要客户端和服务端都有rsync工具.scp 和 rs ...
- thinkphp 获取前端传递过来的参数
thinkphp 获取前端传递过来的参数 use think\facade\Request; // 获取当前请求的name变量 Request::param('name'); // 获取当前请求的所有 ...