jQuery之小白计划
用于简化学习jquery步骤,达到入门的程度,文章参考锋利的jQuery等
___Alive___
努力的学,然后骄傲的活着。
展开
-
JQ之小白计划一(简单介绍)
简介jQuery是开源软件,使用MIT许可证授权。 jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档对象模型(DOM)元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使jQuery函数库能够创建功能强大的动态网页以及...翻译 2018-10-27 03:33:00 · 431 阅读 · 1 评论 -
JQ之小白计划二(选择器)
参考《锋利的jQuery》1:基本选择器<script type="text/javascript"> $(document).ready(function(){ //选择 id为 one 的元素 $('#btn1').click(function(){ $('#one').css("background","#bfa"); ...原创 2018-10-27 04:51:36 · 248 阅读 · 0 评论 -
JQ之小白计划三(DOM操作)
参考《锋利的jQuery》初始化:<body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> &am原创 2018-10-27 15:12:07 · 246 阅读 · 0 评论 -
JQ之小白计划四(事件的简单介绍)
什么是 jQuery 事件jQuery事件是DOM事件的封装,同时支持自定义的扩展。在程序设计中,事件和代理有着相似的作用: 它们提供了一种机制,使得行为的实现方式和调用时机可以分离。不谈jQuery,DOM本身就提供了一系列的javascript事件,例如click,keyup,submit。 未实现相关业务逻辑,通常会为这些事件定义一系列的处理函数,处理函数定义了业务的实现方式,...转载 2018-10-27 16:08:50 · 283 阅读 · 0 评论 -
JQ之小白计划五(事件的举例)
1:绑定事件1.1点击事件<script type="text/javascript">$(function(){ $("#panel h5.head").bind("click",function(){ var $content = $(this).next(); if($content.is(":visible")){//判断是否不可...原创 2018-10-27 16:24:49 · 234 阅读 · 0 评论 -
JQ之小白计划六(动画)
1:show和hide<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head...原创 2018-10-27 19:45:13 · 263 阅读 · 0 评论 -
JQ之小白计划七(做一些小例子)
1:控制字体大小<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>..原创 2018-10-27 20:17:45 · 316 阅读 · 0 评论 -
JQ之小白计划八(Ajax)
Ajax介绍 AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出。传统的Web应用允许用户端填写表单(form),当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多带宽,...原创 2018-10-27 22:45:02 · 347 阅读 · 0 评论 -
JQ之控制回到顶部的速度
效果:通过JQ控制返回顶部的速度代码如下(复制可直接使用) :<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">原创 2018-10-29 18:47:13 · 535 阅读 · 0 评论 -
JQ之简单的搜索动画
效果图:涉及bootstrap以及jquery1: HTML <div class="search"> <form action="" method="get" accept-charset="utf-8"> <input type="text" placeholder="搜索&qu原创 2018-10-08 19:20:44 · 398 阅读 · 0 评论 -
JQ之实现后台管理的基本布局和部分动画
1:效果图效果:1:侧边导航的手风琴效果2:部分页面切换效果(点击用户管理,不需要刷新)2:代码部分注:三个页面复制到一个项目里,可以直接运行看效果 index.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>后台...原创 2018-10-29 18:13:25 · 809 阅读 · 0 评论