如何搭建一个服务平台,快速优化seo软件,移动应用开发与服务,菏泽住房和城乡建设厅网站 文章目录 一、jQuery是什么二、dom对象和jQuery对象1、DOM对象可以和jQuery对象相互的转换 三、基本选择器1、元素选择器#xff1a;根据HTML元素的名称选择元素2、ID选择器#xff1a;通过元素的ID属性选择元素3、类选择器#xff1a;通过元素的class属性选择元素4、通… 文章目录 一、jQuery是什么二、dom对象和jQuery对象1、DOM对象可以和jQuery对象相互的转换 三、基本选择器1、元素选择器根据HTML元素的名称选择元素2、ID选择器通过元素的ID属性选择元素3、类选择器通过元素的class属性选择元素4、通配符选择器选择所有元素5、属性选择器根据元素的属性选择元素6、多个属性选择器根据多个属性选择元素7、子元素选择器选择特定父元素的子元素8、后代选择器选择特定元素的后代元素不仅限于直接子元素9、相邻兄弟选择器选择紧接在另一元素后的元素且二者有相同父元素10、一般兄弟选择器选择所有在另一元素后的兄弟元素且二者有相同父元素11、首元素选择器选择特定父元素的第一个子元素12、末元素选择器选择特定父元素的最后一个子元素13、奇偶元素选择器选择特定父元素的奇数或偶数索引的子元素14、特定索引选择器选择特定父元素的具有特定索引的子元素15、表单选择器使用input标签的type属性值定位DOM对象的方式。16、不是选择器选择不匹配特定选择器的所有元素 四、表单属性过滤器1、:input选择所有的input、textarea、select和button元素。2、:text选择所有的文本输入框3、:password选择所有的密码输入框4、:radio选择所有的单选按钮5、:checkbox选择所有的复选框6、:submit选择所有的提交按钮7、:image选择所有的图像按钮8、:reset选择所有的重置按钮9、:button选择所有的按钮元素和类型为button的input元素10、:file选择所有的文件上传元素11、:hidden选择所有隐藏的元素12、:enabled选择所有启用的表单元素13、:disabled选择所有禁用的表单元素14、:checked选择所有被选中的表单元素如复选框、单选按钮15、:selected选择所有被选中的option元素 五、使用each循环处理数组六、jQuery中给DOM对象绑定事件1、$(选择器).事件名称(事件的处理函数)2、on 事件绑定 七、使用jQuery的函数实现Ajax请求的处理。1、jQuery实现Ajax请求的处理2、$.ajax函数3、Ajax中的json结构参数说明1、async2、contentType3、data4、dataType5、error6、success7、url8、type 一、jQuery是什么 jQuery是一个JavaScript库它封装了JavaScript常用的功能代码提供一种简便的JavaScript设计模式优化HTML文档遍历、事件处理、动画和Ajax交互。jQuery的设计宗旨是“Write Less, Do More”即倡导写更少的代码做更多的事情。它具有快速、小巧且功能丰富的特点。 jQuery具有以下一些主要特点
简洁性jQuery使用简洁的语法来操作HTML文档、处理事件、执行动画和与服务器交互。它大大简化了传统JavaScript代码的编写。跨浏览器兼容性jQuery内部处理了浏览器的兼容性问题使得开发者可以编写统一的代码而无需担心不同浏览器之间的差异。丰富的插件支持jQuery拥有庞大的插件库这些插件可以帮助开发者实现各种复杂的功能从表单验证到复杂的UI效果。链式操作jQuery支持链式操作这意味着可以对一个jQuery对象连续调用多个方法而无需每次都重新选择元素。事件处理jQuery提供了简洁的事件处理机制可以方便地绑定和处理各种事件。Ajax交互jQuery简化了Ajax的使用使得开发者可以轻松地实现与服务器的异步交互。
由于jQuery的这些优点它被广泛用于Web开发中无论是简单的静态页面还是复杂的Web应用都可以看到jQuery的身影。
二、dom对象和jQuery对象
DOM对象使用javascript的语法创建的对象叫做DOM对象也就是js对象。
var obj document.getElementById(txt1); // obj是DOM对象也叫做js对象
obj.value; // 获取DOM对象的属性调用其方法。jQuery对象使用jquery语法表示对象叫做jquery对象。 注意jquery表示的对象都是数组。 var jobj $(#txt1); // jobj就是使用jQuery语法表示的对象就是jQuery对象它是一个数组现在数组中就一个值。
1、DOM对象可以和jQuery对象相互的转换
DOM对象可以转为jQuery
$(DOM对象)jQuery对象也可以转为DOM对象
从数组中获取第一个对象第一个对象就是DOM对象使用[0]或者get(0)。 为什么要进行DOM和jQuery的转换目的是要使用对象的方法或者方法。 当你是DOM对象时可以使用DOM对象的属性或者方法如果你要想使用jQuery提供的函数必须是jQuery对象才可以。 三、基本选择器 jQuery提供了多种基本选择器用于选择页面上的元素。选择器就是一个字符串用来定位DOM对象的。定位了DOM对象就可以通过jQuery的函数操作DOM。这些选择器基于元素的名称、ID、类名、属性以及元素在DOM树中的位置来定位元素。 以下是一些常用的jQuery基本选择器
1、元素选择器根据HTML元素的名称选择元素
$(p) // 选择所有的p元素2、ID选择器通过元素的ID属性选择元素
$(#myId) // 选择ID为myId的元素3、类选择器通过元素的class属性选择元素
$(.myClass) // 选择所有class为myClass的元素4、通配符选择器选择所有元素
$(*) // 选择页面上的所有元素5、属性选择器根据元素的属性选择元素
$([href]) // 选择所有具有href属性的元素
$([href#]) // 选择所有href属性值为#的元素6、多个属性选择器根据多个属性选择元素
$([href][target_blank]) // 选择同时具有href和target_blank属性的元素7、子元素选择器选择特定父元素的子元素
$(ul li) // 选择所有ul元素内的li元素8、后代选择器选择特定元素的后代元素不仅限于直接子元素
$(ul li a) // 选择所有ul元素内的li元素下的a元素9、相邻兄弟选择器选择紧接在另一元素后的元素且二者有相同父元素
$(label input) // 选择所有紧接在label元素后的input元素10、一般兄弟选择器选择所有在另一元素后的兄弟元素且二者有相同父元素
$(form ~ input) // 选择form元素内的所有input兄弟元素11、首元素选择器选择特定父元素的第一个子元素
$(ul li:first-child) // 选择所有ul元素内的第一个li子元素12、末元素选择器选择特定父元素的最后一个子元素
$(ul li:last-child) // 选择所有ul元素内的最后一个li子元素13、奇偶元素选择器选择特定父元素的奇数或偶数索引的子元素
$(ul li:even) // 选择所有ul元素内的偶数索引的li子元素
$(ul li:odd) // 选择所有ul元素内的奇数索引的li子元素14、特定索引选择器选择特定父元素的具有特定索引的子元素
$(ul li:eq(2)) // 选择所有ul元素内的第三个li子元素索引从0开始15、表单选择器使用input标签的type属性值定位DOM对象的方式。
$(:type属性值)// 例如
$(:text), // 选择的是所有的单行文本框
$(:button), // 选择的是所有的按钮。16、不是选择器选择不匹配特定选择器的所有元素
$(input:not(:checked)) // 选择所有未被选中的input元素这些选择器可以根据需要组合使用以创建更复杂的选择器表达式从而精确地定位页面上的元素。在使用jQuery选择器时请确保文档已经加载完毕通常将选择器代码放在$(document).ready()函数中以确保DOM元素已经可用。
四、表单属性过滤器 在jQuery中表单属性过滤器允许您基于表单元素的特定属性来选择元素。这些过滤器对于处理表单输入特别有用因为它们可以根据元素的属性如type、checked、disabled、selected等来快速选择元素。 以下是一些常用的jQuery表单属性过滤器
1、:input选择所有的input、textarea、select和button元素。
$(:input) // 选择所有的输入元素2、:text选择所有的文本输入框
$(:text) // 选择所有的input typetext元素3、:password选择所有的密码输入框
$(:password) // 选择所有的input typepassword元素4、:radio选择所有的单选按钮
$(:radio) // 选择所有的input typeradio元素5、:checkbox选择所有的复选框
$(:checkbox) // 选择所有的input typecheckbox元素6、:submit选择所有的提交按钮
$(:submit) // 选择所有的input typesubmit元素7、:image选择所有的图像按钮
$(:image) // 选择所有的input typeimage元素8、:reset选择所有的重置按钮
$(:reset) // 选择所有的input typereset元素9、:button选择所有的按钮元素和类型为button的元素
$(:button) // 选择所有的button和input typebutton元素10、:file选择所有的文件上传元素
$(:file) // 选择所有的input typefile元素11、:hidden选择所有隐藏的元素
$(:hidden) // 选择所有隐藏的元素包括input typehidden12、:enabled选择所有启用的表单元素
$(:enabled) // 选择所有启用的表单元素13、:disabled选择所有禁用的表单元素
$(:disabled) // 选择所有禁用的表单元素14、:checked选择所有被选中的表单元素如复选框、单选按钮
$(:checked) // 选择所有被选中的复选框和单选按钮15、:selected选择所有被选中的元素
$(:selected) // 选择所有被选中的option元素这些表单属性过滤器可以与其它选择器组合使用以构建更复杂的选择器表达式从而精确地选择满足特定条件的表单元素。
例如如果想要选择所有被选中的复选框并且它们的父元素是某个特定的div可以这样写
$(#myDiv :checkbox:checked) // 选择ID为myDiv的元素内的所有被选中的复选框五、使用each循环处理数组 valappendeach这三个函数是使用最高的 可以对数组 jsonDOM数组循环处理数组 json中的每个成员都会调用一次处理函数。
var arr { 1, 2, 3}; //数组var json {name:lisi,age:20 };var obj $(:text);语法$.each( 循环的内容处理函数 )表示使用jQuery的each循环数组每个数组成员都会执行后面的“处理函数”一次。
$相当于是java的一个类名each就是类中的静态方法静态方法调用可以使用类名.方法名称
处理函数function(index, element)
index, element都是自定义的形参 名称自定义。index循环的索引element数组中的成员
js循环数组
for(var i0; iarr.length; i){var item arr[i]; //数组成员//操作数组成员shuchu(i, item);
}function shuchu(index, element){consol.log(index, element);
}循环jQuery对象 jQuery对象就是DOM数组。
jQuery对象.each( function(index,element) {} )六、jQuery中给DOM对象绑定事件
1、$(选择器).事件名称(事件的处理函数)
$(选择器)定位DOM对象 DOM对象可以有多个这些DOM对象都绑定事件了。
事件名称就是js中事件去掉on的部分例如 js中的单击事件 onclick()。
jQuery中的事件名称就是click都是小写的。
事件的处理函数就是一个function当事件发生时执行这个函数的内容。
例如给id是btn的按钮绑定单击事件
$(#btn).click(funtion(){alert(btn按钮单击了)
})2、on 事件绑定
$(选择器).on( 事件名称 , 事件的处理函数)
事件名称就是js事件中去掉on的部分例如js中onclick 这里就是click。
事件的处理函数function 定义。
input typebutton idbtn$(#btn).on(click, function() { 处理按钮单击 } )七、使用jQuery的函数实现Ajax请求的处理。
1、jQuery实现Ajax请求的处理
没有jQuery之前使用XMLHttpRequest做Ajax 有4个步骤。
创建异步对象给异步对象绑定事件始异步请求对象使用异步对象发送请求
jQuery简化了ajax请求的处理。使用三个函数可以实现Ajax请求的处理。
$.ajax()jQuery中实现ajax的核心函数。$.post()使用post方式做ajax请求。$.get() 使用get方式发送ajax请求。
$.post()和$.get() 他们在内部都是调用的 $.ajax()。
2、$.ajax函数
$.ajax()参数是一个json的结构。
$.ajax( {名称:值 名称1:值1..... } ) $.ajax( { async:true ,contentType:application/json ,data: {name:lisi,age:20 },dataType:json,error:function(){ 请求出现错误时执行的函数 },success:function( data ) { // data 就是responseText, 是jQuery处理后的数据。},url:bmiAjax,type:get})3、Ajax中的json结构参数说明
1、async
是一个boolean类型的值默认是true 表示异步请求的。可以不写这个配置项xmlHttp.open(get, url, true)第三个参数一样的意思。
2、contentType
一个字符串表示从浏览器发送服务器的参数的类型。 可以不写。 例如你想表示请求的参数是json格式的可以写application/json。
3、data
可以是字符串数组json表示请求的参数和参数值。常用的是json格式的数据
4、dataType
表示期望从服务器端返回的数据格式。可选的有 xml html text json
当我们使用$.ajax()发送请求时会把dataType的值发送给服务器。那servlet能读取到dataType的值就知道你的浏览器需要的是 json或者xml的数据那么服务器就可以返回你需要的数据格式。
5、error
一个function 表示当请求发生错误时执行的函数。
6、success
一个function。表示请求状态。请求成功了从服务器端返回了数据会执行success指定函数
XMLHttpRequest对象当readyState4 status200的时候。
7、url
请求的地址
8、type
请求方式get或者post不用区分大小写。 默认是get方式。
主要使用的是 urldatadataTypesuccess。
