#Javascript和Jquery的区别、用法及常用方法合集

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;

改变 <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)


猜你喜欢

转载自blog.csdn.net/iversons/article/details/79456446