jQuery
蔡蔡动起来
感谢我身边所有帮助过我的人。我的学弟我的学长我的同班同学。学渣走向学霸之路不易,希望我可以从一个菜鸟到码农再到一名真正的前端工程师。
展开
-
二、jQuery小程序之jQuery HTML text() html() val()、attr()、添加元素、获取设置css、尺寸
获得内容和属性:jQuery 拥有可操作 HTML 元素和属性的强大方法。jQuery DOM操作:获得内容:三个简单实用的用于 DOM 操作的 jQuery 方法:text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值,获得输入字段的值<script typ...原创 2018-08-09 15:48:27 · 1023 阅读 · 0 评论 -
jQuery事件模型
提供了统一的事件处理方法 允许添加多个事件处理函数 使用标准的事件名称(不带on) 事件实例做为事件处理函数的第一个参数 标准化事件实例最常用的属性 提供了统一的事件取消和阻止默认行为的方法添加事件处理on(eventType[,selector][,data],handler) eventType事件名称,多个用空格隔开。handler事件处理函数。<h2>t...原创 2018-08-21 09:09:30 · 664 阅读 · 0 评论 -
DOM事件模型
浏览器事件模型:DOM 0级事件模型 DOM 2级事件模型DOM 0级事件模型:<input type="button" onclick="doSomething()" /> input.onclick=function(){...} event =event||window.event;兼容性问题 var target=event.target||event.src...原创 2018-08-20 10:13:50 · 1935 阅读 · 0 评论 -
jQuery的介绍以及基本概念
jQuery是一款JavaScript库。可以方便地处理HTML、事件、动画等。Query是一个快速的简介的javascript库。也算是javascript的一个框架jquery可以实现html页面保持代码和html内容分离。也就是说,在html中不用插入一堆js来调用命令了。优势1.轻量级2.强大的选择器3.出色的DOM操作封装(对DOM节点属性的改变)4.完善的事件和事件对...原创 2018-08-19 14:08:28 · 224 阅读 · 0 评论 -
瀑布流追加效果
json是JavaScript对象表示法,是轻量级的文本数据交换格式;属性与属性之间用逗号分开;属性与属性值之间用冒号分开。json只能用双引号。data[0].srcdata[2].title 追加条件:最后一个盒子的top值+其高度<document高度值+滚动条滚动的值<script> //模拟数据 var data=[{ "...原创 2018-08-22 10:36:28 · 230 阅读 · 0 评论 -
在页面中操作DOM元素二
第三章:修改jquery对象的内容和样式。修改元素样式:className attr()修改类。但是一般不这么改。 添加或修改class:addClass(names) removeClass(names) <style> .box{ width: 100px; height: 100px; background-color: #cc...原创 2018-08-19 12:23:14 · 237 阅读 · 0 评论 -
在页面中操作DOM元素一、操作元素的特性、属性和数据
元素的特性attributes和属性properties:1. attribute翻译为特性,是HTML标签内自带的属性(如id、name、value…)2. property翻译为属性,HTML标签元素返回为Dom元素后,Dom元素作为一个对象,给这个Dom对象重新添加的属性。(如firstChild、lastChild…)3. HTML标签默认自带的属性也添加到了Dom的属性中,也可以...原创 2018-08-19 12:22:45 · 346 阅读 · 0 评论 -
瀑布流 jQuery和js区别
瀑布流是什么:瀑布流式布局。一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。布局优点:有效降低界面复杂度,节省空间。无需复杂的页码导航链接或按钮。 对触屏设备来说,交互方式更符合直觉 更高的参与度 知识点:box-sizing 属性可以被用来调整这些表现: content-box 是默认值。如果你...原创 2018-08-22 08:28:41 · 106 阅读 · 0 评论 -
一、jQuery小程序之jQuery效果 显示和隐藏 fading方法 滑动方法 animate()动画方法 chaining
隐藏和显示:<head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.mi原创 2018-08-08 19:58:20 · 842 阅读 · 0 评论 -
jQuery的add() not() filter() has() slice() map() each() is() end() addBack()方法详解
通过查询实现添加删除。添加元素:.add() $(function(){ console.log($(".item1,.item2")) console.log($(".item1").add(".item2").add('.item3')); })删除元素:not(selector)删除掉选择器中的元素。 filter(selector...原创 2018-08-11 16:54:17 · 180 阅读 · 0 评论 -
查找jQuery对象的方法children() contents() find() parent() closet() next() pre() siblings()
通过关系查找jQuery对象的方法:children([selector]) contents() find(selector) parent([selector]) parents([selector]) parentsUntil([selector]) closet(selector)children()和contents()都是查找子元素,不查找孙子元素。<di...原创 2018-08-11 11:32:35 · 1086 阅读 · 0 评论 -
jQuery基础
通过jQuery选择器获取到的无论是多个元素、0个元素还是1个元素都会被封装到类数组中,我们也可以把它称为jQuery对象集合或者jQuery元素集合。当提到jQuery对象、jQuery集合、jQuery对象集合、jQuery元素集合一样。操作jQuery对象:检查数量 父子邻居关系 过滤元素的集合 遍历DOM对象和jQuery对象区别: DOM对象也可以说是DOM元...原创 2018-08-11 10:08:24 · 121 阅读 · 0 评论 -
jQuery AJAX
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。$(selector).load(URL,data,callback);必需的 URL 参数规定您希望加载的 URL。可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。可选的 callback 参数是 load() 方法完成后所执行的函数名称。 <script type="text/...原创 2018-08-09 17:36:31 · 90 阅读 · 0 评论 -
三、jQuery小程序之jQuery 遍历
什么是遍历?jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。遍历 DOMjQuery 提供了多种遍历 DOM 的方法。遍历方法中最大的种类是树遍历(tree-traversal)。遍历 - 祖先通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。...原创 2018-08-09 16:23:09 · 1313 阅读 · 0 评论 -
弹出层
弹出层的介绍:使用场景:注册、登录(表单基本校验)。统一的消息提示框(代替alert)。减少页面跳转、刷新的一些操作。使用思路:1.遮罩层。2.弹出层窗口。都是通过div实现的。使用jQuery动态控制隐藏显示。 我们还会对弹出层做简单的封装。让弹出层结构得到重复利用。html: <!--弹出层遮罩、弹出层窗体是并列关系-->...原创 2018-08-21 10:42:41 · 302 阅读 · 0 评论