一、JQuery对象的引用 1.jq的下载地址:https://jquery.com/download/ 点击Download the uncompressed, development jQuery 版本号 进入js文件后,按ctrl+s保存到电脑中

2.DOM(Document Object Model),即文档对象模型; DOM最顶层是Window对象,Window对象下面是Document(文档对象)、Navigator(浏览器对象)、Screen(屏幕对象)、History(浏览历史对象)、Location(URL对象)。

3.$ 符号在JQuery中代表对JQuery对象的引用,JQuery是核心对象;JQuery是对js的封装。

4.通过Html的script标签的形式引入JQuery的js文件

document.getElementById(“mydiv”); 该方法获取一个id="mydiv"的元素对象; 获取的元素对象为:

mydiv

当id="mydiv"不存在时,该元素对象为null

document.getElementsByTagName(“div”); 该方法是获取标签名为div的所有元素对象;返回的是一个结果集 如果没有标签名为div的元素对象,则返回一个HTMLCollection[]

document.getElementByClassName(“myclass”); 获取所有class=“myclass”的元素对象; 即通过class选择器获取所有的class='myclass’的元素对象。 如果没有,则返回一个HTMLCollection[] document对象还有各种方法来获取元素对象。

2.JQuery对象 通过JQuery的方法获取元素对象,返回JQuery包装集; $(“#mydiv”) “#属性值"的格式是id选择器的语法 $(”.mydiv") “.属性值"的格式是class选择器的语法 $(”#mydiv"),当id="mydiv"的属性值不存在时,返回一个jQuery.fn.init {},而不是null;

var divDOM = document.getElementById("mydiv");

//DOM对象转JQuery对象,只需要$()方法对DOM对象进行包装即可

var divDOMToJQuery = $(divDOM);

var divJQuery = $("#mydiv");

//JQuery对象转DOM对象,只需要取数组中的元素即可

var divDOM = divJQuery[0];

//遍历JQuery对象数组得到的对象是DOM对象,可以通过$()转化为JQuery对象

$("#mydiv").each(function(){

var jquery = $(this);

});

三.JQuery选择器 1.基础选择器 id选择器,#id属性值,$ (“#id属性值”); 即选择一个id的值为指定值的元素对象;若存在多个同名id,则取第一个。

元素名称选择器,标签名/元素名,$ (“标签名/元素名”); 即选择所有指定标签的元素对象。

class选择器,.class属性值,$(“.class属性值”); 即选择一个class的值为指定值的元素对象。

通用选择器,*,$(" * ") ; 即选择页面中的所有元素对象。

组合选择器,选择器1、选择器2、…,$(“选择器1、选择器2、…”); 即选择指定选择器选中的元素对象。

id选择器,元素名称选择器,class选择器这三个是常用的选择器。

2.层次选择器 后代选择器,ancestor descendant, $ (“#parent div”); 即选择id为parent元素的所有div元素。

子代选择器,parent>child, $ (“#parent>div”); 即选择id为parent元素的所有直接div子元素。

相邻选择器,prev+next, $ (“.blue+img”); 即选择css的类为blue的下一个同级img元素(必须挨着的指定元素)。

同辈选择器,prev~ sibling, $ (“.blue~img”); sibling(兄弟姐妹),顾名思义,即选择css的类为blue之后的所有同级的img元素。

后代和子代是非同级的,而相邻和同辈是同级的;且非同级的后代和子代选择器更常用。

3.表单选择器 $ (“:input”); 会查找所有的input元素,包含了input、select、textarea、button。 即选择所有的input、select、textarea、button元素;

$ (“input”);这是属于元素名称选择器; 即选择所有标签名为input的元素;

以下为input标签下具体的type属性的选择器

文本框选择器,$ (“:text”); 密码框选择器,$ (" :password"); 单选按钮选择器,$ (“:radio”); 多选按钮选择器,$ (“:checkbox”); 提交按钮选择器,$ (“:submit”); 图像按钮选择器,$ (“:image”); 重置按钮选择器,$ (“:reset”); 文件域选择器,$ (“:file”); 按钮选择器,$ (“:button”);

例如:

$ (“:submit”);即选择提交按钮选择器;

四.JQuery的DOM操作 属性的分类: 固有属性:元素本身就有的属性(例如name,id,class等); 返回值是boolean的属性:selected,checked,disabled 自定义属性:用户自己定义的属性

1.操作元素的属性 a.获取属性 attr(“属性名”);prop(“属性名”);

操作元素的属性

aa

bb

attr()和prop()的区别:

如果是固有属性:

attr()和prop()均可获取;

如果是用户自定义的属性:

attr()可获取;

prop()不可获取,显示undefined;

如果是返回值是boolean类型的属性:

若设置了属性:attr()返回一个具体的值,prop()返回true;

若未设置属性:attr()返回undefined,prop()返回false;

b.设置属性 attr(“属性名”,“属性值”); prop(“属性名”,"属性值); 对于固有属性:prop()和attr()都能设置。

对于返回值是boolean类型的属性:attr()的属性值是具体的值,而prop()的属性值是true或false;prop()设置属性更方便。

对于用户自己定义的属性:attr()能设置,而prop()不能设置

c.移除属性 removeAttr(“属性名”);移除指定属性名的属性

也就是说属性的类型有三种: 固有属性;返回值为Boolean类型的属性;用户自己定义的属性。 如果是返回值为Boolean类型的属性(常用的三种selected,checked,disabled)用prop(),prop(“属性名”,true/false);否则用attr()

2.操作元素的样式

1)attr("class");获取元素的样式名。

2)attr("class","样式名");设置元素的样式。

即重置样式后再添加样式。

3)addClass("样式名");添加样式。

即在保留原来的样式的基础上再添加样式;如果出现相同类型的样式,以最后的为准。

4)css();添加具体的样式(添加行内样式)。

例如:添加单个行内样式,css("font-size","40px");

添加多个行内样式,css({"font-family":"楷体","color":"blue"});使用json格式

5)removeClass("样式名");移除样式。

行内样式的好处:是能直接改,优先级也是最高,对于单个不重复页面处理容易,易于理解。

行内样式的缺点: 当页面重复使用一种类型的style时,容易造成冗余,后期代码量大,不易于维护。

内部样式:可以实现内容与样式分离。 好处:实现了内容与表现相分离,解决了内部样式出现的冗余的问题

缺点:当页面较多,且用到同一种样式的时候,会造成冗余 外部样式:用单独的css文件表示,然后再在内部引用,即首先在css文件下新建一个css文件,用来放样式,然后在html或者是要展示的文件下引用样式:

好处:实现单个css,解决内部样式冗余,方便维护

缺点:几乎没有,除了引用复杂,每一种类型的样式都有他们独特的好处

如果都作用在同一个样式下的三种样式,css的优先级为: 行内样式>内部样式>外部样式; 即使用的样式为优先级最大的css。

3.操作元素的内容

1)html();获取元素的内容,包含html标签(非表单元素)

即获取的内容可以包含html标签的形式

2)html("内容");设置元素的内容,包含html标签(非表单元素)

即通过html("内容")的方式添加元素,内容可以使用html标签的形式。

3)text();获取元素的纯文本内容,不识别html标签(非表单元素)

即通过text()方式获取的文本,拿不到html标签,只能拿到文本信息。

4)text("内容");设置元素的纯文本内容,不识别html标签(非表单元素)

即通过text("内容")的方式,html标签不会被识别,html标签只是按照文本的形式显示。

5)val();获取元素的值(表单元素)

即获取用户在表单元素操作的值

6)val("值");设置元素的值(表单元素)

即设置表单元素的值

总而言之,有html标签的用html()的方式;没有得话,可以用html(),也可以用text()的方式;可以全部直接使用html()的方式。

表单元素: 文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉选框select 即用户页面上可以直接操作的元素

非表单元素: div、span、table、tr、td、li、h1~h6、p 即用户页面上不能直接操作的元素

4.创建元素和添加元素 创建元素 $(“内容”);例如

a div

添加元素

前追加子元素:

a.指定元素.prepend("内容");在指定元素内部的最前面追加内容,内容可以是字符串、JQuery对象、html元素。

b.$("内容").prependTo(指定元素);把内容追加到指定元素内部的最前面,内容可以是字符串、JQuery对象、html元素。

后追加子元素:

a.指定元素.append("内容");在指定元素内部的最后面追加内容,内容可以是字符串、JQuery对象、html元素。

b.$("内容").appendTo(指定元素);把内容追加到指定元素内部的最后面,内容可以是字符串、JQuery对象、html元素。

前追加同级元素:

before(); 在指定元素的前面追加同级元素

后追加同级元素:

after();在指定元素的后面追加同级元素

常用的是prepend()和append()

添加元素时, 如果元素本身不存在(新建的元素),此时会将元素添加到指定位置。 相反,元素本身存在,那么此时会将元素剪切到指定位置。

方法前面都需要通过选择器选中元素,再调用操作的方法。

5.删除元素

remove();删除元素及其对应的子元素,标签和内容一起删除

指定元素.remove();

empty();清空元素内容,保留标签。

指定元素.empty();

remove()比较常用。 6.获取指定元素 并遍历

指定元素.each(function(index,element){

console.log(element);

console.log(this);

//此时的this==element;

});

指定元素.each(function(){

console.log(this);

});

遍历得到的结果是DOM对象,需要$(this);进行转换为JQuery对象。

7.预加载事件 ready()加载事件; 当页面的DOM结构加载完毕之后执行; 类似于js的load事件; ready事件可以写多个;

语法:$(document).ready(function(){

});

简写:$(function(){

});

在使用第三方插件时,等待第三方插件加载后才能调用它的方法。此时可以用ready。

五、绑定事件 绑定单个事件:

1.bind绑定

$("元素名").bind("事件类型",function(){

});

2.直接绑定

$("元素名").事件名(function(){

});

click事件: jq:$(“#id属性值”).click(function(){ //具体实现 $(this).prop(“disabled”,true);//不可点击 // $(this),把获取到的DOM对象转换成JQ }); js:document.getElementById(“id属性值”).οnclick=function(){ //具体实现 }

绑定多个事件:

bind绑定

1.同时为多个事件绑定同一个函数

$("元素名").bind("事件类型 事件类型 ...",function(){

});

2.为元素绑定多个事件,并设置对应的函数

$("元素名").bind("事件类型",function(){

}).bind("事件类型",function(){

})

3.为元素绑定多个事件并设置对应的函数

$("元素名").bind({

"事件类型":function(){

},

"事件类型":function(){

}

});

直接绑定(最常用)

$("元素名").click(function(){

}).mouseout(function(){

});

直接绑定比较常用; 对元素设置鼠标图标,style=“cursor:pointer”

六、JQuery和AJAX的使用 AJAX也是js框架,特点是异步的,且是无刷新的。 异步就是说不需要同步等待,即服务器处理的时候我们不需要等待。 无刷新就是说不需要页面重新加载,我们还在页面原来的位置,即ajax会进行一个局部刷新,对我们影响甚微。 1.$.ajax JQuery调用ajax方法: $.ajax({}); 参数:

type:请求方式GET/POST

url:请求地址url

async:是否异步,默认是true,表示异步

data:发送到服务器的数据

dataType:预期服务器返回的数据类型

contentType:设置请求头

success:请求成功时调用的函数

error:请求失败时调用的函数

$.ajax({ type:“get”, url:“”, data:{ //请求数据为json对象,例如name:“zhangsan” //若没有参数,则不需要设置 }, dataType:“json”,//预期返回的数据类型,如果是json格式,则在接收到返回值时会自动封装成json对象, success:function(data){ //在请求成功时,对接收的数据进行处理 },

}); $.get()

1.发送get请求,只有请求地址url,忽略返回值

$.get("url");

2.发送get请求,有请求地址url和请求参数,忽略返回值

$.get("url",params);//params为json格式

3.发送get请求,有请求地址url,请求成功后有返回值

$.get("url",function(data){

//对返回值进行处理

});

4.发送get请求,有请求地址url和请求参数,且请求成功后有返回值

$.get("url",params,function(data){

//对返回值进行处理

});

post请求: 只需要将get改成psot即可; $.getJson(); 即将返回值装换成json格式。其余跟 $.get();一样。

总结: 1.JQuery和AJAX的使用流程,首先,使用JQuery形式的选择器选中指定的元素;其次对元素操作,一般是先获取指定元素(表单元素)的值,然后封装成json格式;最后,请求成功后,对返回的参数进行处理,将数据进行局部渲染。 2.JQuery是对Js的一个封装;JQuery内部封装很多了方法,用起来更方便。 从选择器,到元素的操作,再到ajax异步请求。

参考阅读

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: