jQuery学习笔记

认识 jQuery 对象

认识$符

在jQuery库中，$是jQuery的简写形式。例如：

$(“#app”)等价于jQuery(“#app”)

$.ajax等价于jQuery.ajax

这里jQuery是一个顶级对象，所有的函数方法都在这个对象之下，$是它的别名。

jQuery对象

jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象，只有通过jQuery对象才能调用jQuery中的方法。

jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法，例如: $(“#persontab”).html();

jQuery 对象无法使用 DOM 对象的任何方法

DOM 对象也不能使用 jQuery 里的任何方法

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

var $variable = jQuery 对象

var variable = DOM 对象

jQuery 对象转换 DOM 对象

jQuery 对象不能使用 DOM 中的方法, 但有时想要的方法在jQuery中没有封装, 必须使用DOM对象解决。这时可以通过两种方法由jQuery获取DOM对象：

DOM 对象转换 jQuery 对象

对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象，因为本来jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。DOM对象转换成jQuery对象后就可以使用jQuery中的方法了

jQuery代码怎么写

导入jQuery库

加载文档

$(document).ready(function(){}); 作用相当于JS当中的 window.onload = function(){}

$(document).ready(function(){}); 可以简写为 $(function(){});

jQuery常用方法

val()方法

返回value值：jQuery对象.val()

对多选框而言：val()方法返回的是被选中的第一个值，而不是全部被选中的值组成的数组

设置value值：传入数组适应性更强

①jQuery对象.val("value")

文本框

密码框

单选下拉列表

②jQuery对象.val(["value01","value02"])

文本框

密码框

单选框

多选框

单选下拉列表

多选下拉列表

each()方法

用来遍历一组元素

each(function(){

在函数体内使用this关键字引用当前正在被遍历的元素

this永远是DOM对象    

$(this)转为jQuery对象

});

text()方法

返回文本值：jQuery对象.text()

设置文本值：jQuery对象.text("文本值")

attr()方法

返回属性值：jQuery对象.attr("属性名")

设置属性值：jQuery对象.attr("属性名","属性值")

$.trim()方法：去除字符串前后空格

jQuery特性

隐式迭代

自动遍历所有被选中的p元素，把单击响应函数绑定到每一个p元素上
$("p").click(function(){

//jQuery对象.text()方法可以返回元素节点内的文本值

var text = $(this).text();

alert(text);

});

函数连缀

很多jQuery方法，返回值都是调用对象本身，所以可以以“连缀”的方式，继续进行调用   例如：$("text").focus(...).blur(...)

注意：在使用方法连缀时，一定要留意每个参与连缀的方法的返回值还是不是原来调用的那个对象， 如果不是了，就不能继续连缀，除非你要操作的是这个新的对象

基本选择器

id选择器：#id $("#one")

class选择器：.class $(".mini")

选择元素名：$(元素名) $("div")

所有元素：* $("*")

“,”表示并列关系 $("span,#two") 此时所有span元素和id为two的都会被选中

选择特定class属性的元素 元素名.class $("div.one")

 

 

本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源。