- jQuery笔记 11-25
- jquery选择器详解 11-25
- jQuery 效果- 动画 11-25
- 利用jQuery实现短信验证码输入框功能 11-25
- JavaScript降频监听 11-25
- jQuery css() 方法 11-25
- jquery初探 11-25
- 《小白H5成长之路12》网页布局纵横之术 11-25
- Jquery基础第一天:jQuery对象 选择器的使 11-25
- DIY头条,自用 11-25
jQuery笔记
发布者: superzhang | 发布时间:2017-11-25toggleClass(class)
如果存在(不存在)就删除(添加)一个类。
返回值:jQuery
参数
class (String) :CSS类名
示例:为匹配的元素切换 'selected' 类
HTML 代码:
<p>Hello</p><p>Hello Again</p>
jQuery 代码:
$("p").toggleClass("selected");
结果:
[ <p>Hello</p>, <p>Hello Again</p> ]
1.html代码
(1)html()
取得第一个匹配元素的html内容,这个函数不能用于XML文档.但可以用于XHTML文档
返回值:String
示例:
HTML 代码:
<div><p>Hello</p></div>
jQuery 代码:
$("div").html();
结果:
Hello
(2)html(
jquery选择器详解
发布者: superzhang | 发布时间:2017-11-25jQuery是一个轻量级的js库
选择器
基本选择器
元素选择器:$(“标签名”)
类选择器:$(“.class”)
id选择器:$(“#id”)
选择器组:$(“#d1,.importent”)
添加一个+按钮,使段落的字体放大
层次选择器
在select1元素下,选中所有满足select2的子孙元素:$(“select1 select2”)
在select1元素下,选中所有满足select2的子元素:$(“select1>select2”)
选中select1元素的,满足select2的下一个弟弟:$(“select1+select2”)
选中select1元素的,满足select2的所有弟弟:$(“select1~select2”)
过滤选择器
第一个元素 ——:first
最后一个元素——:last
把selecto
jQuery 效果- 动画
发布者: superzhang | 发布时间:2017-11-25jQuery animate() 方法允许您创建自定义的动画。
jQuery 动画实例
jQuery
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素:
实例
$("button").click(function(){ $("div").animate({left:'250px'});});
<利用jQuery实现短信验证码输入框功能
发布者: superzhang | 发布时间:2017-11-25其核心是利用了keyup事件属性。
在事例里添加了正则因此只能输入数字,输入英文字符时会弹出警告提示框。
1、未输入效果
未输入效果
2、验证码输入效果
验证码输入效果
jQuery核心代码:
<script>
$('.demo input').keyup(function() {
if(/^[0-9]{1}$/g.test($(this).val())) {
$(this).next().focus()
JavaScript降频监听
发布者: superzhang | 发布时间:2017-11-25推荐一个很好的js工具库叫做Underscore.js。
Underscore.js 底层
// Returns a function, that, as long as it continues to be invoked, will not// be triggered. The function will be called after it stops being called for// N milliseconds. If `immediate` is passed, trigger the function on the// leading edge, instead of the trailing._.debounce = function(func, wait, immediate) {var timeout;return function() {var context = this, args = arguments;var later = function() {timeout = null;if (!immediate) func.apply(context, args);};var callNow = immediate && !timeout;clearTimeout(timeout);timeout = setTjQuery css() 方法
发布者: superzhang | 发布时间:2017-11-25jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:
css("propertyname");
下面的例子将返回首个匹配元素的 background-color 值:
实例
$("p").css("background-color");
设置 CSS 属性
如需设置指定的 CSS 属性,请使用如下语法:
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-colo
jquery初探
发布者: superzhang | 发布时间:2017-11-25作为一名程序员,需要有全面的知识和技能,不仅仅是对某一领域的精通。比如作为一名java程序员,就不仅要对java的知识很精通,也要对sql,javascript等熟练掌握,方能满足日常的工作要求。
对于js,目前的实际情况是大多使用的是js的各种框架,最常见的额就是jquery了。
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1
《小白H5成长之路12》网页布局纵横之术
发布者: superzhang | 发布时间:2017-11-25老朱一大早口中念念有词:“折冲樽俎之间,决胜千里之外”,小白摸不清头脑问道:“这是什么意思?”
“没事!我正在想今天怎么跟你说网页布局的事,因为网页布局也分横布局和纵布局,因此我就想到了古人这句话,今天咱就探讨一下网页布局的纵横之术吧!”
“好的,听上去很高大上啊!”,小白笑嘻嘻的说道。
“小白,你经常看网页,有没有发现,无论一个网站多复杂,它都是由三大块组成的:头部区域、主体内容区域和底部区域。头部区域主要放导航、logo、用户登录等内容。主体区域就是整个网页的主要内容。底部区域会放版权信息、联系我们等等。这三块由上至下竖着排列,这就是网页的第一纵。”
“在每个区域里面我们又会放置横排的容
Jquery基础第一天:jQuery对象 选择器的使用
发布者: superzhang | 发布时间:2017-11-251. 什么是:
jQuery是一个快速的,简洁的javascript库。
为什么: 2个原因:
1. 对DOM的终极简化:
核心DOM: 万能,繁琐
HTML DOM: 简单,不是万能
jquery: 4个方面提供了极简化的操作
1. 查找和操作元素(增,删,改,查)
2. 事件处理
3. 动画效果
4. AJAX操作
2. 屏蔽了99%的浏览器兼容性问题
只要jquery允许使用的,都是没有兼容性问题。
何时: 今后,绝大多数公司和前端框架都是利用jquery开发的。
口号: write less, do more
2. 如何使用:
版本:
1. 1.x: 特点: 兼容IE8
2个文件:
1. jquery-1.11.3.js: 未经压缩的可读性良好的js
2. jquery-1.11.3.min.js: 经过代码压缩的最小的js
去掉了所有注释,空白字符,换行。。。
2. 2.x: 特点: 不再兼容IE8
环境准备:
1. ze
DIY头条,自用
发布者: superzhang | 发布时间:2017-11-25<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取头条数据--瀑布流</title>
<style>
*{margin:0;padding:0;list-style: none;text-decoration:none;}
#Project{position:relative;width:1000px;margin:0 auto;top:50px;}
</style>
</head>
<body>
<h1 style="width:100%;text-align:center;background:#ED4040;color:#fff;position:fixed;top:0;left:0;z-ind
