JQuery
关注
分享
扫一扫
文章平均质量分 77
刘小筛
为自己代言～
展开
-
JS 将有规律的数组，转换成对象数组
在工作中经常会遇到解析数据的问题，今天需要用js实现，将一个含有一些有规律数据的数组，解析成对象数组。比如：[‘123’,‘er’,‘456’, ‘fr’] ==》[{id: ‘123’, name:‘er’}, {id: ‘456’, name:‘fr’}]由于时间关系，写了一个小的casevar j = {}; var str = ['123','er','456', 'fr']; var obj = []; for (va原创 2020-12-25 12:00:21 · 361 阅读 · 0 评论 -
JQuery中的.attr()与.removeAttr()
每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。在JS中，我们经常使用到的DOM，操作特性方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还是会存在很多问题，这里先不说。而在jQuery中用一个attr()与remove原创 2016-05-31 07:06:27 · 981 阅读 · 0 评论 -
HQuery中html结构及文本的修改
读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text() 我们一起来看看。.html()方法获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容，具体有3种用法： 1..html() 不传入值，就是获取集合中第一个匹配元素的HTML内容 2..html( htmlString ) 设置每原创 2016-05-31 07:25:13 · 1410 阅读 · 0 评论 -
JQuery中的 .val()
jQuery中的.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。.val()方法简介1..val()无参数，获取匹配的元素集合中第一个元素的当前值 2..val( value )，设置匹配的元素集合中每个元素的值 3..val( function ) ，一个用来返回设置值的函数注意： 1.通过.val()处理select元素， 当没有选择项被原创 2016-05-31 18:01:43 · 1952 阅读 · 0 评论 -
JQuery中样式标签的处理
增加样式标签JQuery中增加样式使用.addClass(className)方法通过动态改变类名（class），可以让其修改元素呈现出不同的效果。在HTML结构中里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。同样的jQuery开发者也原创 2016-05-31 18:17:17 · 549 阅读 · 0 评论 -
JQuery中的样式切换
在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换，比如隔行换色效果。jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass。.toggleClass( )方法：在匹配的元素集合中的每个元素上添原创 2016-05-31 18:31:20 · 4122 阅读 · 1 评论 -
JQuery中的样式操作
通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了。.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性获取方法：1..css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值 2..css( propertyNames原创 2016-05-31 19:22:43 · 667 阅读 · 0 评论 -
JQuery中.css()与.addClass()设置样式的区别
对于样式的设置，我们学了addClass与css方法，那么两者之间有什么区别？可维护性：.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改，日原创 2016-05-31 19:35:08 · 5254 阅读 · 0 评论 -
JQuery中元素的数据存储
html5 dataset是新的HTML5标准，允许你在普通的元素标签里嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由JavaScript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中，我们如何实现数据存取呢? jQuery就提供了一原创 2016-05-31 19:47:47 · 1997 阅读 · 0 评论 -
jQuery中的Ajax
jQuerh对Ajax操作进行了封装，在jQuery中最底层的方法是.ajax().第二层是load(),.ajax().第二层是load(),.get()和.post().第三层是.post().第三层是.getScript()和$.getjSon().load()方法load方法是jQuery中最为简单和常用的Ajax方法，能载入远程的HTML代码并插入到DOM中，它的结构是：load(url[原创 2016-11-12 13:48:09 · 424 阅读 · 0 评论 -
Ajax总结
1、什么是Ajax不用刷新页面，但可以和服务器进行通信的方式，使用Ajax的主要方式是XMLHttpRequest对象 使用XMLHttpRequest对象实现Ajax2、Ajax传输数据的三种方式：（1）、XML：笨重，解析困难，但XML是通用的数据交换格式（2）、HTML：不需要解析可以直接放到文档中。若仅更新一部分区域，但传输的数据不是很方便，但HTML代码需要拼接完成（3）、JSON：小巧原创 2016-11-13 14:42:45 · 368 阅读 · 0 评论 -
jQuery中的事件冒泡、事件捕获和事件追加引发的问题
近日在项目中遇到一些问题，一个是ID值唯一存在的问题，另一个便是事件的追加产生的错误。 关于ID值唯一存在，从id的定义来看，id代表唯一的元素，若页面中出现多个标签存在相同的id，那么此时只有第一个id所在的标签起作用，而且会多次起作用。所以若需要多个相同的元素出现在一个页面上，切记不要使用相同的ID值，建议可使用class或者name。 其次是事件的冒泡、捕获和追加事件，前两者很好理解，见得原创 2017-05-05 18:09:05 · 872 阅读 · 0 评论 -
.attr()与.removeAttr()
每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还是会存在很多问题，这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了原创 2016-05-30 21:42:12 · 499 阅读 · 0 评论 -
JQuery中的特殊选择器--this
相信很多刚接触jQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？下面我们一起来看一下！this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imoocvar ch = { name:"中国",原创 2016-05-30 21:16:52 · 3019 阅读 · 0 评论 -
JQiery选择器中的表单元素
无论是提交还是传递数据，表单元素在动态交互页面的作用是非常重要的。jQuery中专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素。 表单选择器这么方便，让我们来看一下都可以怎么使用吧：除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 (′:password′)==(':password') ==原创 2016-05-30 20:50:44 · 1224 阅读 · 0 评论 -
JQuery对象与DOM对象
先把对象放一边，我们先来试着实现一个最简单的小程序，在div中写入：”您好！好好学习jQuery才是最正确选择“这段文字。想像一下，如果是你你会怎么写？<html><head> <meta charset="utf-8"/> <title>第一个简单的jQuery程序</title> <style type="text/css"> div{原创 2016-05-29 14:20:54 · 661 阅读 · 0 评论 -
JQuery中的ID选择器
页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。jQuery几乎支持主流的css1~css3选择器的写法id选择器：一个用来查找的ID，即元素的id属性 $( “#id” )id选择器也是基本的选择器，jQuery内部使用Jav原创 2016-05-29 14:40:59 · 1123 阅读 · 0 评论 -
JQuery中的类选择器
类选择器类选择器，顾名思义，通过class样式类名来获取节点使用方式为$( “.class” )类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的下面实现一个原生getElementsByClassName()函数的实现代码原创 2016-05-29 14:55:31 · 857 阅读 · 1 评论 -
JQuery中的元素选择器
元素选择器元素选择器：根据给定（html）标记名称选择所有的元素表示方式为：$( “element” )搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持下面编辑器代码使用两种方式获取并设置CSS属性：<!DOCTYPE html><html><head> <meta http-equiv="Content-type"原创 2016-05-29 15:10:49 · 565 阅读 · 0 评论 -
JQuery中的全选择器（通配符）
全选择器（*选择器）在CSS中，经常会在第一行写下这样一段样式 * {padding: 0; margin: 0;}通配符*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中文档页面中的元素表示方式为：$( “*” )抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递”*”同样可以获取到 下面代码原创 2016-05-29 15:18:53 · 1345 阅读 · 0 评论 -
JQuery中的层级选择器
层级选择器文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。选择器中的层级选择器就是用来处理 子元素 后代元素 兄弟元素 相邻元素这种关系的通过一个列表，对比层级选择器的区别具体实现我们看一下下面代码<!DOCTYPE html><html><head> <me原创 2016-05-29 15:47:56 · 652 阅读 · 0 评论 -
JQuery筛选选择器之内容筛选
基本筛选选择器针对的都是元素DOM节点，如果我们想要通过内容来过滤一些东西，该怎么办呢？ jQuery是相当强大的，这一点它当然想到了啊，JQuery专门为此提供了一组内容筛选选择器，当然其规则也会体现在它所包含的子元素或者文本内容上。让我们一起来通过一张表了解一下：注意：:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素原创 2016-05-30 17:22:37 · 1033 阅读 · 0 评论 -
JQuery中的基本筛选选择器
很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头。我们通过一个列表，来看看基本筛选器的描述注意：eq(), :lt(), :gt(), :even, :odd原创 2016-05-30 17:08:16 · 4177 阅读 · 0 评论 -
JQuery选择器中的可见性筛选
元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden下面用表格大致了解一下，就两个选择器：这2个选择器都是 jQuery 延伸出来的，看起来比较简单，但是元素可见性依赖于适用的样式 :hidden选择器，不仅仅包含样式是display=”none”的元素，还包括隐藏表单、visibility等等隐藏一个元素的几种方式：1.CSS displa原创 2016-05-30 17:47:56 · 1602 阅读 · 0 评论 -
JQuery选择器中的属性筛选
属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它们的威力的地方。 下面我们通过一张表大致了解一下：这么多的属性选择器，有木有看晕啊？其实，在这么多属性选择器中[attr=”value”]和[attr*=”value”]是最常用最实用的。[attr=”va原创 2016-05-30 20:16:48 · 832 阅读 · 0 评论 -
JQuery选择器中的子元素选择器
子元素筛选选择器不常使用，其筛选规则比起其它的选择器稍微要复杂点，其实博主感觉并不怎么难啦，因为单词so easy,哈哈。我们来看看都有哪些吧：注意： 1. :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1) 2.:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：原创 2016-05-30 20:32:26 · 1841 阅读 · 0 评论 -
浅谈JQuery
JQuery简介JQuery作为一个框架，首先，它是一个轻量级的JS库；其次它的核心依然是JavaScript；再者，它的兼容性比较好，不仅兼容了CSS3，还兼容各种浏览器。JQuery的核心理念：用最少的代码做更多的事。JQuery的优势：容易上手强大的选择器解决浏览器的兼容完善的事件机制出色的Ajax封装丰富的UI原创 2016-05-29 12:25:24 · 456 阅读 · 0 评论