JQuery
极客研究者
空余时间喜欢研究、钻研技术,入行不久的一枚菜鸟
展开
-
Ajax在jQuery中的应用
首先,我们还是使用warmserver本地服务器进行演示,案例:Tab栏切换,使用ajax异步请求服务器,获取对应的数据,然后在前台页面将响应数据更新到指定的位置上。文件结构:建好post和get请求方式的服务器端响应文件show.php和showpost.phpshow.php文件:<?phpif($_GET['cid']== 1){ echo '<li>111111111111111111111111111111111</li>'; e.原创 2020-05-14 17:54:42 · 246 阅读 · 0 评论 -
使用Jquery操作表单元素
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title原创 2020-05-14 16:29:09 · 200 阅读 · 0 评论 -
Jquery之淡入淡出的动画效果
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&原创 2020-05-14 16:27:02 · 206 阅读 · 0 评论 -
自定义动画
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title.原创 2020-05-14 16:24:20 · 201 阅读 · 0 评论 -
Jquery之滑动效果
滑动效果:通过高度的变化实现slideDown([speed,callbackfunction])方法:滑动显示匹配的元素slideUp([speed,callbackfunction])方法:滑动隐藏匹配的元素slideToggle([speed,callbackfunction])方法:通过高度的变化动态切换元素的可见性speed:可选参数,元素从可见–>隐藏的速度或者 隐藏—>可见的速度也就是元素经过多少毫秒后完全显示或者隐藏也可以是参数:slow(600毫秒)、normal(原创 2020-05-14 16:19:28 · 210 阅读 · 0 评论 -
Jquery之显示/隐藏元素
不带任何效果的隐藏元素:hide()方法带参的方法:以优雅的动画隐藏匹配的所有元素隐藏匹配元素:hide([speed],[callbackfunction])可选参数:speed:毫秒(数字)–在指定的毫秒内隐藏当前元素callbackfunction:隐藏完元素后的回调函数show()方法也是类似切换元素的可见状态:使用toggle()方法:实现切换元素的可见状态可见 —> 隐藏隐藏 —> 可见Demo:<!DOCTYPE html><html原创 2020-05-14 16:17:29 · 225 阅读 · 0 评论 -
Jquery之多库共存问题
解决Jquery和其他库的冲突:在使用JQuery开发的时候,这可能会用到其他的javascript库,多库共存时可能会发生冲突,若发生冲突,可以通过以下方案解决。Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2020-05-14 15:58:00 · 169 阅读 · 0 评论 -
JQuery之对象拷贝
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title.原创 2020-05-14 15:46:00 · 203 阅读 · 0 评论 -
事件解绑
移除事件方法:off(events,[selector],[fn])不带参数:移除元素上绑定的所有事件Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=原创 2020-05-14 15:42:01 · 248 阅读 · 0 评论 -
事件对象
通常情况下,在不同的浏览器下获取事件对象是比较困难的。Jquery进行了必要的处理,使得在任何浏览器中都能轻松获取事件对象以及事件对象的一些属性。在程序中使用事件对象非常简单,只要为函数添加一个参数即可.$(selector).on(eventName,function(event){//event:事件对象…});当触发event事件时,该事件对象将被创建,该事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁了。Demo:<!DOCTYPE html>原创 2020-05-14 15:26:14 · 88 阅读 · 0 评论 -
Jquery中的事件处理
1.页面加载响应事件:2.Jquery中常见事件:3.事件的绑定:使用on()为匹配元素绑定指定的事件格式:on(events,[selector],[data],fn):为匹配的元素绑定一个或多个事件处理函数Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d原创 2020-05-14 15:18:33 · 179 阅读 · 0 评论 -
常用遍历元素的方法
遍历节点:使用each(callback)方法来遍历元素经典用法:$(selector).each(function(index,element){…});美元符号(selector):返回的是一个集合(伪数组)index:当前遍历节点的索引element:DOM元素对象使用jquery方法或者属性时,需要转换为jquery对象 —>$(element)或者使用$(this) -->当前遍历节点对象方式二:$.each(array,function(index,eleme原创 2020-05-14 12:27:59 · 1606 阅读 · 0 评论 -
对DOM节点进行操作--删除、复制与替换节点
删除节点:方法1:remove([selector]):用于从DOM中删除所有匹配的元素selector:可选参数,jquery选择器,不传的话,则删除匹配到的所有元素该方法删除某个节点之后,该节点所包含的所有后代节点元素也同时被删除返回值是一个指向已被删除节点的引用,以后还可以继续方法2:detach([selector]):删除DOM中匹配的元素selector:可选参数,jquery选择器,不传的话,则删除匹配到的所有元素与remove()方法不同的是,这个方法不会吧匹配的元素从jq原创 2020-05-14 12:21:17 · 1433 阅读 · 0 评论 -
对DOM节点进行操作--插入/添加节点
插入节点(添加节点):在元素内部插入:创建节点:使用工厂函数:::(html) -->包装成jquery对象1.向元素内部插入节点:就是向一个元素中添加子元素和内容append(content):为所有匹配的元素的内部添加内容,追加到该元素的后面appendTo(content);将指定的元素移动到另一元素内如:A.appendTo(B) -->将A元素移动到B元素内部的最后面(移动到最后面)prepend(content):为所有匹配的元素的内部前置内容(将新元素添加到最前面原创 2020-05-14 12:17:12 · 2693 阅读 · 0 评论 -
JQuery之对元素的内容和值进行操作
由于元素内容可分为文本内容和HTML内容,那么对元素的操作也可以分为对文本内容操作和对HTML内容操作。1.对元素内容进行操作text():获取匹配元素内部的文本内容text(val):设置匹配元素内部的文本内容2.对HTML内容操作html():获取匹配元素内部的html代码html(val):设置匹配元素内部的html代码3.对元素值操作val():用于获取第一个匹配元素的当前值val(val):用于设置所有匹配元素的值Demo:<!DOCTYPE html><原创 2020-05-14 11:58:21 · 280 阅读 · 0 评论 -
JQuery之对元素属性进行操作
1.设置和获取元素的自定义属性:attr(name): 获取匹配的第一个元素的属性值attr(name,value) 为所有匹配的元素设置一个属性值(value为属性值)attr(properties) 为所有匹配元素以集合形式同时设置多个属性({name:value,name:value…})2.设置和获取元素的固有属性:所谓元素的固有属性就是元素本身自带的属性。prop(name):获取匹配元素的属性值prop(name,value):设置匹配元素的属性值Demo:<!DOCTY原创 2020-05-14 11:40:22 · 153 阅读 · 1 评论 -
对元素的CSS样式操作
在Jquery中,对元素的CSS样式操作可以通过修改CSS类或者CSS属性来实现。方式一: 使用css()方法获取或设置元素的属性css(name):返回第一个匹配元素的样式属性css(name,value):为所有匹配元素的指定样式设置值css(properties) :为所有匹配的元素设置样式属性(设置多个样式)css({属性1:值1,属性2:值2,属性3:值3,属性4:值5, … 属性n:值n})方式二:通过修改CSS类实现改变一个元素的整体效果addClass(class):为所有匹原创 2020-05-14 11:27:38 · 263 阅读 · 0 评论 -
Jquery中的排他思想
排他思想:想要多选一的效果,当前元素设置样式,其他兄弟元素清除样式即可Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"原创 2020-05-14 10:54:24 · 214 阅读 · 0 评论 -
Jquery之筛选方法
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title.原创 2020-05-14 10:49:30 · 343 阅读 · 0 评论 -
Jquery之隐式迭代
隐式迭代:遍历内部DOM元素(伪数组形式存储)的过程。简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2020-05-14 10:26:04 · 601 阅读 · 0 评论 -
Jquery对象和DOM对象
DOM对象:文档对象模型DOM是以层次结构组织的节点或信息片段的集合,每一份DOM都可以表示成一棵树。JQuery对象:就是通过jquery包装DOM对象后产生的对象。注意:虽然JQuery对象就是通过jquery包装DOM对象后产生的,但是JQuery无法使用DOM对象任何方法,同理DOM对象也无法使用JQuery对象的所有的方法。需要进行相互转换才可使用。1.Jquery对象转换成DOM对象方式一:jquery对象是一个类似数组的对象,可以通过[index]的方法获取对应的dom对象原创 2020-05-14 10:09:04 · 145 阅读 · 0 评论 -
表单选择器
表单选择器是匹配经常在表单内出现的元素,但是匹配的元素不一定在表单中。:input 匹配所有的input元素:button 匹配所有的普通按钮,即type='button’的input元素:checkbox 匹配所有的复选框:file 匹配所有的文件域:image 匹配所有的图像域:password 匹配所有的密码域:radio 匹配所有的单选按钮:reset 匹配所有的重置按钮(type='reset’的input元素):submit 匹配所有的提交原创 2020-05-14 09:46:43 · 1278 阅读 · 0 评论 -
JQuery过滤选择器--属性选择器
属性选择器就是通过元素的属性作为过滤条件进行筛选对象。[attribute] 匹配包含给定属性的元素[attribute=value] : 匹配属性值为value的元素[attribute!=value] : 匹配属性值不等于value的元素[attribute*=value] :匹配属性值含有value的元素[attribute^=value] :匹配属性值以value开头的元素[attribute$=value] :匹配属性值以value结尾的元素[selector1][selector原创 2020-05-14 09:25:13 · 194 阅读 · 0 评论 -
JQuery过滤选择器--子元素选择器
子元素选择器:筛选给定某个元素的子元素,具体的过滤条件由选择器的种类而定。:first-child 匹配所有给定元素的第一个子元素:last-child 匹配所有给定元素的最后一个子元素:nth-child(index/even/odd/equation):匹配父元素下第index个子元素或者奇偶元素,index从1开始,不是从0开始Demo:<!DOCTYPE html><html lang="en"><head> <meta char原创 2020-05-14 09:18:41 · 232 阅读 · 0 评论 -
JQuery过滤选择器--表单对象的属性过滤器
表单对象的属性过滤器通过表单元素的状态属性(例如选中、不可用等状态)匹配元素。过滤器::checked 匹配所有被选中的元素如:$(‘input:checked’):disabled 匹配所有不可用元素:enabled 匹配所有可用元素:selected 匹配所有被选中的option元素如:$(‘select option:selected’)Demo:<!DOCTYPE html><html lang="en"><head> <met原创 2020-05-14 09:12:55 · 350 阅读 · 0 评论 -
JQuery过滤选择器--可见性过滤器
元素的可见状态有两种:分别是隐藏状态和可见状态。可见性过滤器就是利用元素的可见状态匹配元素的。匹配所有不可见元素的:hidden 过滤器匹配所有可见元素的:visible过滤器注意:在应用:hidden 过滤器时,display属性为none和input元素的type属性为hidden的元素都可以被匹配到。...原创 2020-05-14 08:57:03 · 270 阅读 · 0 评论 -
JQuery过滤选择器--内容过滤器
内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。包括::contains(text) 匹配包含给定文本的元素:empty 匹配所有不包含子元素或者文本的空元素:has(selector) 匹配含有选择器所匹配元素的元素:parent 匹配含有子元素或者文本的元素Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-05-14 08:49:42 · 268 阅读 · 0 评论 -
JQuery过滤选择器--简单过滤器
简单过滤器是指以冒号开头,通常用于实现简单过滤效果的过滤器。:first 匹配找到的第一个元素:last 匹配找到的最后一个元素:even 匹配所有索引值为偶数的元素:odd 匹配所有索引值为奇数的元素:eq(index) 匹配一个给定索引的元素(基于集合数据):gt(index) 匹配所有大于给定索引值的元素:lt(index) 匹配所有小于给定索引值的元素:not(selector) 去除所有与给定选择器匹配的元素eg:$(‘input:not(:checked)’)原创 2020-05-14 08:44:48 · 284 阅读 · 0 评论 -
Jquery之基本选择器
Jquery选择器:支持使用css语法,获取页面上指定的元素对象基本选择器:ID选择器:利用DOM元素的id属性值来筛选匹配的元素用法:$("#id") --获取的元素是唯一的元素选择器:根据元素名称匹配相应的元素(匹配到的元素可能有多个,也可能只有一个)用法:$(“element”) --element:要获取元素的标签名类名选择器:通过元素拥有的css类的名称查找匹配的DOM元素用法:$(".class") --class:要查询元素所用的CSS类名复合选择器:将多个选择器原创 2020-05-14 08:36:31 · 171 阅读 · 0 评论 -
Jquery的工厂函数
Jquery的工厂函数"":在Jquery中,无论使用哪种类型的选择器,都需要从一个"":在Jquery中,无论使用哪种类型的选择器,都需要从一个"":在Jquery中,无论使用哪种类型的选择器,都需要从一个"“和一对”()“开始。在”()"中通常使用字符串参数,参数中可以包含任何CSS选择符表达式典型的选择器格式:$(selector).methodName();selector是一个字符串表达式,用于识别DOM中的元素,然后使用Jquery提供的方法集合加以设置。多个Jquery操作可以以链原创 2020-05-14 08:28:11 · 810 阅读 · 0 评论