JQuery 能大大简化 Javascript 程序的编写,要使用 jQuery,首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如:
<script language="javascript" src="/js/jquery.min.js"></script>
库文件既可以放在本地,也可以直接使用知名公司的 CDN,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。
Google 提供的点击打开链接http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
jQuery 官方的点击打开链接http://code.jquery.com/jquery-1.6.min.js
jQuery 代码具体的写法和原生的 Javascript 写法在执行常见操作时的区别如下:
1 定位元素:
document.getElementById("abc") // JS
$("#abc") //jQuery通过id定位
$(".abc") //jQuery通过class定位
$("div") //jQuery通过标签定位
2 改变元素的内容:
abc.innerHTML = "test"; // JS
abc.html("test"); // jQuery
3 显示隐藏元素:
abc.style.display = "none"; // JS
abc.style.display = "block"; // JS
abc.hide(); // jQuery
abc.show(); // jQuery
abc.toggle(); //在显示和隐藏之间切换
4 获得焦点:
abc.focus(); // JS和jQuery是一样的
5 为表单赋值:
abc.value = "test"; // JS
abc.val("test"); // jQuery
6 获得表单的值:
alert(abc.value); // JS
alert(abc.val()); // jQuery
7 设置元素不可用:
abc.disabled = true; // JS
abc.attr("disabled", true); // jQuery
8 修改元素样式:
abc.style.fontSize=size; // JS
abc.css('font-size', 20); // jQuery
abc.className="test"; // JS
abc.removeClass(); // JQuery
abc.addClass("test"); // JQuery
9 判断复选框是否选中:
if(abc.attr("checked") == "checked") // jQuery
用js改变背景图片URL:
document.getElementById("divId").style.backgroundImage="url(bg.png)";
JS打开新窗口的2种方式:
window.location.href="http://www.baidu.com"; //在同当前窗口中打开窗口
window.open("http://www.baidu.com"); //在另外新建窗口中打开窗口
JS如何获取屏幕当前长宽:
window.innerHeight;
window.innerWidth;
打开新的网页并搜索关键字XXX:
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent('XXX'));
改变 <img> 元素的 src 属性:
document.getElementById("image").src="landscape.jpg";
attr() 方法设置或返回被选元素的属性值!
split() 方法用于把一个字符串分割成字符串数组!
通过JS动态添加<script>等标签:
<script>
var script = document.createElement("script");
script.src = "//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js";
var tag = $("head").append(script);
</script>
让输出可以使用log:例如
function log(Y) {
console.log(Y);
}
let XX=Math.hypot(6,8);
log(XX);
parseFloat():
parseFloat() 函数可解析一个字符串,并返回一个浮点数。
该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。
Math.round():
用于数字取整
1、参数的小数点后第一位<5,运算结果为参数整数部分。
2、参数的小数点后第一位>5,运算结果为参数整数部分绝对值+1,符号(即正负)不变。
3、参数的小数点后第一位=5,正数运算结果为整数部分+1,负数运算结果为整数部分。
sort():
sort() 方法用于对数组的元素进行排序,如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序。
substr():
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
stringObject.substr(start,length)
Object.assign():
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.assign
不会跳过那些值为 null 或 undefined 的源对象。
Object.assign(target, ...sources)
Number.isInteger():
Number.isInteger() 方法用来判断给定的参数是否为整数。
Number.isInteger(value)
concat():
concat() 方法用于连接两个或多个字符串。
该方法没有改变原有字符串,但是会返回连接两个或多个字符串新字符串。
string.concat(string1, string2, ..., stringX)
JS获取当前日期是今年的第几天:
Math.ceil(( new Date() - new Date(new Date().getFullYear().toString()))/(24*60*60*1000))+1;
*取出对象数组中每个对象元素中特定的元素并放在一个新的数组中:
const DataTest = Array.from(TargetArray,x =>x.name);
console.log(DataTest)
TargetArray,x =>x.name);
console.log(DataTest)
*判断一个数组中是否有另一个数组(完全包含)的函数<判断交集是否为空>:
const intersection = Array.from(new Set([...NewAuth].filter(x => new Set(OldAuth).has(x))));
console.log(intersection)
*判断两个数组的并集、交集、差集:
const arr1 = [1,2,3];
const arr2 = [3,4,5];
// 并集
const union = Array.from(new Set([...arr1,...arr2])); // union = [1,2,3,4,5]
// 交集
const intersection = Array.from(new Set([...arr1].filter(x => new Set(arr2).has(x)))); // intersection = [3]
// 差集
const difference1 = Array.from(new Set([...arr1].filter(x => !new Set(arr2).has(x)))); // difference1 = [1,2]
const difference2 = Array.from(new Set([...arr2].filter(x => !new Set(arr1).has(x)))); // difference2 = [4,5]
百分数转化为小数:
function toPoint(percent){
var str=percent.replace("%","");
str= str/100;
return str;
}
小数转化为百分数:
function toPercent(point){
var percent = KeepDecimal(Number(point*100));
percent+="%";
return percent;
}
*用于设置唯一的行ID:
function SetArrayID(Array) {
let Data = Array;
if(Data && Data.length>0){
for (let i = 0; i < Data.length; i++) {
Data[i].ID = i + 1;
}
}
return Data;
}
*数值加上千分符,返回字符串:
function FormatNumToMoney(amount){
if (amount) {
return String(amount).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,");
} else {
return amount;
}
}
*判断是不是整数:
function isInteger(Value) {
return Value%1 === 0
}
*保留固定位数小数字:
function KeepDecimal(num,len=2){
//先对参数进行绝对值处理(因为四舍五入的规则不满足负数),然后再转为负数
let finalNum = _.round(Math.abs(num),len);
finalNum = num<0?finalNum*-1:finalNum;
return finalNum;
}
不超过 N 个字符<返回字符串>:
function getString(text){
const Lang = !!(GetCurrentLang() === 'zh-CN');
let inputContent = "";
inputContent = Lang ? `不超过${text}个字符` : `No more than ${text} characters`;
return inputContent;
}
获得当前浏览器语言:
function GetCurrentLang(){
//检测浏览器语言<判断除IE外其他浏览器使用语言>
let currentLang = navigator.language;
if(!currentLang){
//判断IE浏览器使用语言
currentLang = navigator.browserLanguage;
}
currentLang = currentLang === 'zh-CN' ? 'zh-CN' : 'en-US';
return currentLang;
}
请输入、请选择、请搜索<返回字符串>:
function getInput(text, key){
const Lang = !!(GetCurrentLang() === 'zh-CN');
let inputContent = "";
switch (key) {
case 1:inputContent = Lang ? `请输入${text}` : `Please Input ${text}`; break;
case 2:inputContent = Lang ? `请选择${text}` : `Please Select ${text}`; break;
case 3:inputContent = Lang ? `请搜索${text}` : `Please Search ${text}`; break;
};
return inputContent;
}
计算两个日期的差值:
function DateMinus(D1,D2){
let sdate = new Date(D1);
let now = new Date(D2);
let days = now.getTime() - sdate.getTime();
let day = parseInt(days / (1000 * 60 * 60 * 24));
return day;
}