jQuery基本语法 | 易学教程

jQuery 是 JavaScript 的一个函数库。方便、主流

jQuery的开发步骤：

（1）导入jQuery 库

（2）在

$(function(){

写jQuery代码；

});

</script>

（3）jQuery对象 vs DOM对象

1.jQuery对象和 DOM对象不可混用，不能使用另一方的属性和方法

2.jQuery对象是一个 DOM数组对象。所以可以用下标的方式转为 DOM对象

var $btn = $("button");

var btn = $btn[0];

3.jQuery对象使用 $() 包装 DOM对象后产生的对象

例：进行遍历的时候（jQuery对象遍历的方式使用 each，在each 内部的 this 是正在得到的 DOM 对象，而不是一个 jQuery对象。）

$("select : seclected").each(function(){

//alert(this.value); 如果想用jQuery的属性和方法，用$() 包装起来。

alert($(this).value);

});

（4）jQuery 选择器（综合使用，威力巨大）

选取被选中的 select 的option 需要使用选取子节点的方式

$("select[name="test"] :selected").each(function(){ //注意绿色和橘色之间是有空格（黄色）的

//jq代码

});

选择器搞不定，可以借助方法

（5）jQuery对象的方法

一、格式：$(selector).action();

$ : jQuery的缩写

selector: 选择器

action(): 对元素的操作

$(document).ready(function(){

alert("jQuery代码");

});

</script>

二、获取元素的值和修改元素的内容

$(document).ready(function(){

* 获取元素的值（不带参）

* */

//js
var jsValue = document.getElementById('first').innerHTML;
var jsValue1 = document.getElementById('first').innerText;

//jq
var jQValue = $('#first').html();

var jQValue1 = $('#first').text();

* 设置元素的内容（带参）

* */

//js

document.getElementById('first').innerHTML = '修改内容';

document.getElementById('first').innerHTML = '<h2>添加的h2标签</h2>';

//jq

$('#first').html('修改内容');

$('#first').html('<h2>添加的h2标签</h2>');

});

</script>

三、onload和ready的对比

jq: 文档就绪函数，为了防止文档在完全加载（就绪）之前运行jQuery代码

$(document).ready(function(){

//jq代码；

});

js:

window.onload = function(){

//js代码

}

区别（面试可能会问）：

1、加载时间不同。

ready：只要页面的DOM加载完成就可以完成。

onload：包括页面所有资源（图片、js、dom树等）加载完成之后执行。

2、编写的个数不同。

onload：只能写一个，执行一次，后面会覆盖前面，以最后一个为准。

ready：可以同时编写多个，并且每个都可以得到执行。

3、简写形式。

onload：没有简写形式。

$(document).ready()：等价于 $(function(){})

ps:

有一个大型的图库网站，为网页中所有图片添加某些行为，例如单击图片后让它隐藏或显示。

如果使用window.onload方法来处理，那么用户必须等到每一幅图片都加载完毕后，才可以进行操作。

如果使用jQuery中的$(document).ready()方法来进行设置，只要DOM就绪时就可以操作了，不需要等待所有图片下载完毕

例：

//1. js(只能写一个)
window.onload = function(){
alert(1);
}
window.onload = function(){
alert(2);
}
window.onload = function(){
alert(3);
}

//2.jq（可以写多个）

$(document).ready(function(){
alert(4);
});
$(document).ready(function(){
alert(5);
});
$(document).ready(function(){
alert(6);
});

$(function(){
alert(7)
});

</script>

四、jQuery对象(jq对象是个数组)

1. $ == jQuery console.log(jQuery); console.log($); 一样结果

例：

console.log(jQuery);

console.log($);

var jqObj = $('p');

var jqObj = jQuery('p');

2. js 和 jq 对象的相互转化

注: 原生js代码不能和jQuery混合使用

原生DOM对象是可以和jQuery对象互相转变的

例：

// 先获取

var jqObj = $('p');

var jsObj = document.getElementById('two'); //如果是集合的话不能转，集合里的对象可以转

// 再转换

var newjqObj = $('jsObj'); //原生DOM对象转变为 jQuery对象 使用 $() 进行包装

var newjsObj = jqObj.get(0); //jQuery对象转变为原生DOM对象 通过数组的下标

// 输出
console.log("-----------"+jqObj);
console.log("-----------"+jsObj);

console.log("-----------"+newjqObj);

console.log("-----------"+newjsObj);

3. 放弃$，避免多库冲突

可以重新赋个值，$$ 就相当于 jQuery

var $$ = jQuery.noConflict();

var jqObj = $$('p');

例：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery对象的转换</title>
<script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p id="p4">段落4</p>
</body>
<script>
console.log(jQuery);
var $$ = jQuery.noConflict();

var jqObj = $$('p');
var jsObj = document.getElementById('p4');

var newjqObj = $$(jsObj);
var newjsObj = jqObj.get(0);

console.log("------------"+jqObj);
console.log("------------"+jsObj);

console.log("------------"+newjqObj);
console.log("------------"+newjsObj);

/*
* $ == jQuery
*
* */

/*
* 总结：
* 1. 原生js代码不能和jQuery混合使用
* 2. 原生DOM对象是可以和jQuery对象相互转变的。
* */
$(function(){

/*
* 1.jQuery对象转变为原生DOM对象
* */
var con = $('p').get(1).innerHTML;
console.log(con)

/*
* 2.原生DOM对象转变为jQuery对象
* */
var con4 = document.getElementById('p4');
console.log($(con4).html());
});
</script>
</html>

来源：https://www.cnblogs.com/susublogs/p/5982709.html

标签

jquery

dom

jquery文档

jquery选择器

var

dom对象