jQuery 基础知识点梳理

DOM对象:直接使用JavaScript获取的节点对象:

var objDOM = document.getElementById("title");

var objHTML=objDOM.innerHTML;

jQuery对象:使用jQuery包装DOM对象后产生的对象,它能够使用jQuery中的方法:

$("#title").html();

等同于

document.getElementById("title").innerHTML;

DOM对象和jQuery对象分别拥有一套独立的方法,不能混用

jQuery对象转DOM对象:

1、jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象:

var $txtName=$(".txtName"); //jQuery对象

var txtName=$txtName[0]; //DOM对象

2、通过get(index)方法得到相应的DOM对象:

var $txtName = $(".txtName"); //jQuery对象

var txtName = $txtName.get(0); //DOM对象

使用$()函数进行转化:$(DOM对象)

var txtName=document.getElementById("txtName"); //DOM对象

var $txtName = $(txtName); //jQuery对象

注意:

1、jQuery对象命名一般约定以$开头

2、常使用$(this)来获取触发该事件的当前jQuery对象

JSON(JavaScript Object Notation)一种轻量级的数据交互格式

var JSON = { 名称:值,名称:值,...}; //JSON的数值可以是数字、字符串、布尔值、数组或者 对象、null

JSON的取值方法:

点号表示法来获取

追加样式:

addClass("class") 或 addClass(" class1 class2..")

移除样式:

removeClass("class") 或 removeClass("class1 class2 ..")

HTML代码操作:

html()可以对HTML代码进行操作,类似于原生JavaScript中的innerHTML:

$("div.left").html();

$("div.left").html("<div class=‘content‘>...</div>");

文本操作:

text()可以获取或设置元素的文本内容:

$("div.left").text();

$("div.left").text("<div class = ‘content‘> ...</div>");

value值操作:

val()可以获取或设置元素的value属性值:

$(input).val(); //获取value值

$(input).val("值"); //设置value值

节点操作:

jQuery中节点操作主要分为:

查找节点

创建节点

插入节点

删除节点

替换节点

复制节点

创建节点元素:

工厂函数$()用于获取或创建节点:

$(selector):通过选择器获取节点

$(element):把DOM节点转化成jQuery节点

$(html):使用HTML字符串创建jQuery节点

var $newNode2=$("<li title=‘标题为千与千寻’>千与千寻</li>");

创建含文本与属性<li>元素节点

插入子节点:

元素内部插入子节点:

append(content) $(A).append(B)表示将B追加到A中如:$("ul").append($newNode1);

appendTo(content) $(A).appendTo(B)表示把A追加到B中如:$newNode1.appendTo(“ul”);

prepend(content) $(A).prepend(B)表示将B前置插入到A中如:$("ul").prepend($newNode1);

prependTo(content)

插入同辈节点:

元素外部插入同辈节点:

after(content) $(A).after(B)表示将B插入到A之后如:$("ul").after($newNode1);

insertAfter(content) $(A).insertAfter(B)表示将A插入到B之后如:$newNode1.insertAfter(“ul”);

before(content)

insertBefore(content)

替换节点:

replaceWith()和replaceAll()用于替换节点:

复制节点:

clone()用于复制节点:

$(A).clone(true).appendTo(B);

提示:

clone()有个副作用就是会复制id,要么避免对有id的元素克隆,要么使用class代替 id的作用

删除节点:

jQuery提供了三种删除节点的方法:

1、remove():删除整个节点

2、detach():删除整个节点,保留元素的绑定事件、附加的数据

3、empty():清空节点

属性操作:

attr()获取或设置匹配元素的属性值:

//获取元素的某属性的值

$(selector).attr("属性名");

//设置元素的属性值

$(selector).attr("属性名","值");//设置一个属性值

$(selector).attr({"属性1":“值1”,“属性2”,“值2”});//设置多个属性值

removeAttr()匹配的元素中删除一个属性:

$(selector).removeAttr("属性名称");

遍历子元素:

children()方法可以用来获取元素的所有子元素:

$("body").children(); //获取<body>元素的子元素,但不考虑后代元素及文本节点

遍历同辈元素:

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素:

next([expr]) 用于获取紧邻匹配元素之后的元素,如:$("li:eq(1)").css("background-color","#F06");

prev([expr]) 用于获取紧邻匹配元素之前的元素,如:$("li:eq(1)").prev().css("background-color","#F06");

siblings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素,如:$("li:eq(1)").siblings().css("background-color","#F06");

遍历前辈元素:

jQuery中可以遍历前辈元素,方法:

parent() 获取元素的父级元素

parents() 获取元素的祖先元素

遍历--其它方法:

jQuery遍历 - each() :

以每一个匹配的元素作为上下文来执行一个函数:

$("img").each(function(i){

this.src = "test" + i + ".jpg";

})

查找方法 - find() :

搜索所有与指定表达式匹配的元素:

$("p").find("span"); //在所有p元素的后代节点中查找span元素

CSS-DOM操作:

除css()外,还有获取和设置元素高度、宽度、相对位置等的样式操作方法:

height([value]) 设置或返回匹配元素的高度

width([value]) 设置或返回匹配元素的宽度

offset([value]) 返回以像素为单位的top和left坐标。此方法仅对可见元素有效

jQuery的事件:

jQuery事件是对JavaScript事件的封装,常用事件分类如下:

基础事件:

window事件

鼠标事件

键盘事件

表单事件

复合事件是多个事件的组合:

鼠标光标悬停

鼠标连续点击

鼠标事件:

click(fn) :单击鼠标时

mouseover(fn) :鼠标移过时

mouseout(fn) :鼠标移出时

键盘事件:

keydown(fn) :按下键盘时

keyup(fn) :释放按键时

keypress(fn) :产生可打印的字符时

表单事件:

focus(fn) :获得焦点

blur(fn) :失去焦点

submit(fn) :表单提交时

事件绑定:

bind()方法 - 事件绑定:

$(selector).bind(type[,data],fn)

//例如:

$("#btn").bind("click",fn);

$("#btn").bind("click dblclick",fn);

$("#btn").bind({

click:function(){},

mouseover:function(){}

});

unbind()方法 - 解除事件绑定:

$(selector).unbind()

//例如:

$("#btn").unbind()

$("#btn").unbind("click")

$("#btn").unbind("click",handler);//指定的事件处理函数

on()方法 - 事件绑定:

$(selector).on(events[,selector][,data],fn)

//例如:

$("#form").on("click",".btn",{},fn);

off()方法 - 解除事件绑定:

$(selector).off(events,[selector],[handler])

$(selector).off(events,[selector])

$(selector).off(events)

$(selector).off()

注意:

建议用on()方法绑定事件,效率更高

鼠标光标悬停事件:

hover(fn1,fn2)方法:

相当于mouseover与mouseout事件的组合

//鼠标在父级菜单移入移出,子菜单隐藏与显示:

$("#parentMenu").hover(function(){

$("#childMenu").css("display","block");//mouseover

},

function(){

$("#childMenu").css("display","none");//mouseout

}

);

鼠标连续click事件:

toggle()方法用于模拟鼠标连续click事件:

$("body").toggle(

function(){},//第1,4,7...次点击时触发

function(){},//第2,5,8...次点击时触发

function(){},//第3,6,9...次点击时触发

);

jQuery的动画效果:

1、控制元素显示与隐藏

2、控制元素淡入淡出

3、改变元素高度

显示及隐藏元素:

show([duration][,complete])

hide([duration][,complete])

$(".tipsbox").show("slow");

注意:

显示速度可以取如下值:

毫秒(如1000)、slow、normal、fast

淡入淡出效果:

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

$("input[name=fadein_btn]").click(function(){

$("img").fadeIn("slow");

});

$("input[name=fadeout_btn]").click(function(){

$("img").fadeOut(1000);

});

切换元素可见状态:

toggle()除了可以模拟鼠标的连续单击事件外,还能用于切换元素的可见状态

$("li:gt(5):not(:last)").toggle();

改变元素的高度:

slideDown() 可以使元素逐步延伸显示

slideUp() 则使元素逐步缩短直至隐藏

$("h2").click(function(){

$(".txt").slideUp("slow");

$(".txt").slideDown("slow");

});

自定义动画:

animate()方法用于创建自定义动画的函数:

$(selector).animate(params [,speed] [,easing] [,fn]);

params:规定产生动画效果的CSS样式和值

speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒数值(如:1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供“linear”和“swing”

fn:在动画完成时执行的函数,每个元素执行一次

时间: 2024-11-07 13:40:31

jQuery 基础知识点梳理的相关文章

jQuery基础知识点(下)

在实际开发中,jQuery的实践性非常强大.上一篇本人已经整理出了一部分基础知识点,该文即是对以上的补充和扩展. 1.表单值的操作 1 //获取文本框的值 2 //txt.value 3 var val = $("#txt").val(); //没有参数表示获取值 4 //设置文本框的值 5 //txt.value = "123123"; 6 $("#txt").val("这是val设置的值"); // 有参数表示设置值 2.

jquery基础知识点总结

Jquery是一个优秀的js库,它简化了js的复杂操作,不需要关心浏览器的兼容问题,提供了大量实用方法. Jquery的写法 方法函数化 链式操作 取值赋值合体] $("p").html();   取值 $("p").html('hello');  赋值 (当一组元素的时候,取值是一组中的第一个,赋值是一组中的所有元素.) Jq与js可以共存,不能混用 主要的筛选方法 has()   not()   filter() next()   prev()    find(

jQuery基础知识点(DOM操作)

使用jQuery的方式来操作DOM更加的简洁.方便,统一的调用方式方便学习并且可降低学习成本. 1.样式属性操作   1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, “red”); ②设置多个样式(也可以设置单个) // 参数为 {}(对象) $(selector).css({“color”: “red”, “font-size”: “30px”}); 2)获取样式属性操作 // 参数

jQuery基础知识点(上)

jQuery是一个优秀的.轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),而jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. 1.jQuery入口函数与

java基础知识点梳理1

抽象类:   在不断抽取过程中,将共性内容中的方法声明抽取,但是方法不一样,没有抽取,这时抽取到的方法,并不具体,需要被指定关键字abstract所标示,声明为抽象方法. 抽象类的特点: 1:抽象方法只能定义在抽象类中,抽象类和抽象方法必须由abstract关键字修饰(可以描述类和方法,不可以描述变量). 2:抽象方法只定义方法声明,并不定义方法实现. 3:抽象类不可以被创建对象(实例化). 4:只有通过子类继承抽象类并覆盖了抽象类中的所有抽象方法后,该子类才可以实例化.否则,该子类还是一个抽象

java基础知识点梳理2

多线程  进程:正在进行中的程序.其实进程就是一个应用程序运行时的内存分配空间.  线程:其实就是进程中一个程序执行控制单元,一条执行路径.进程负责的是应用程序的空间的标示.线程负责的是应用程序的执行顺序. 返回当前线程的名称:Thread.currentThread().getName() 线程的名称是由:Thread-编号定义的.编号从0开始. 线程要运行的代码都统一存放在了run方法中. 创建线程的第一种方式:继承Thread,由子类复写run方法. 步骤: 1.定义类继承Thread类:

java基础知识点梳理3

集合框架 特点: 1:对象封装数据,对象多了也需要存储.集合用于存储对象. 2:对象的个数确定可以使用数组,但是不确定怎么办?可以用集合.因为集合是可变长度的. 集合和数组的区别: 1:数组是固定长度的:集合可变长度的. 2:数组可以存储基本数据类型,也可以存储引用数据类型:集合只能存储引用数据类型. 3:数组存储的元素必须是同一个数据类型:集合存储的对象可以是不同数据类型.   数据结构:就是容器中存储数据的方式. 对于集合容器,有很多种.因为每一个容器的自身特点不同,其实原理在于每个容器的内

java基础知识点梳理

一.数据结构及运算 1.&和&&的区别? (1)&&会出现短路,如果可以通过第一个表达式判断出整个表达式的结果,则不继续后面表达式的运算: 只能操作boolean类型数据: (2)&不会出现短路,将整个表达式都运算.既可以操作boolean数据还可以操作数. 2.标示符命名规则: 由数字(0-9),大小写英文字母,以及_和$组成. 不能以数字开头. 不能使用关键字来自定义命名. 3.数据类型: (1)基本数据类型(4类8种): 整数类型:byte.short

jquery知识点梳理

jQuery知识点梳理 一.              jquery选择器 基本选择器 ID选择器 类选择器 标记选择器 分组选择器 通配符选择器 层次选择器 $(“ancestor descendent”):祖先后代选择器    空格 $(“parent > child”):父子选择器   大于 $(“prev + next”):相邻后兄弟元素选择器   加号 $(“prev ~ siblings”):所有后兄弟元素选择器  波浪线 过滤选择器:基本过滤选择器 :first.:last.:od