- 01-JQuery介绍
- 02-jQuery文件引入和加载的区别
- 03-jQuery的基础选择器
- 04-jQuery的层级选择器
- 05-jQuery的基本过滤选择器
- 06-jQuery的属性选择器
- 07-jQuery的筛选选择器
- 08-jQuery的对象和DOM对象的转换
- 09-jQuery效果-显示和隐藏
- 10-jQuery的效果-slide
- 11-jQuery的效果-fade
- 12-jQuery的效果-animate
- 13-右下角弹出小广告
- 14-jQuery的属性操作-attr和prop
- 15-jQuery的属性操作-class和值操作
- 16-操作input中的value值
- 17-jQuery文档操作-插入节点
- 18-jQuery文档操作-复制、替换和删除
- 19-jQuery的位置属性
- 20-仿淘宝导航栏案例
- 21-jQuery的筛选方法
- 22-选项卡嵌套
- 23-小米官方部分案例
- 24-焦点式轮播图
- 25-动态实现轮播图
- 26-事件流
- 27-jQuery事件对象和事件冒泡
- 28-jQuery事件的绑定和移除
- 29-自定义事件和事件代理
- 30-jQuery的鼠标事件一
- 31-jQuery的鼠标事件二
- 32-JQuery的表单事件
- 33-jQuery的ajax技术
- 34-Bootstrap介绍和引入
- 35-相应式原理
- 36-BootStrap的栅格系统介绍
- 37-BootStrap的栅格系统使用
- 38-BootStrap的css全局样式一
- 39-BootStrap的css全局样式二
- 40-BootStrap的组件使用一
- 41-BootStrap的组件使用二
- 42-BootStrap插件介绍
01-jQuery介绍
1、jQuery官网；
write less,do more;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-jquery的介绍</title> <style type="text/css"> div{ width: 100%; height: 100px; margin: 10px 0px 0px 0px; display: none; background-color: red; } </style> </head> <body> <button id="btn">展示</button> <div></div> <div></div> <div></div> <div></div> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script type="text/javascript"> /*单独书写JavaScript的痛楚： 1、书写繁琐，代码量大； 2、代码复杂； 3、动画，开启定时器，小心定时器的清除，各种操作和处理事件，不好实现； 4、浏览器的兼容性； //jQuery解决了以上痛点； */ // window.onload = function(){ // var oBtn = document.getElementsByTagName('button')[0]; // var ODivs = document.getElementsByTagName('div'); // // oBtn.onclick = function(){ // for(var i = 0;i < ODivs.length;i++){ // ODivs[i].style.display = 'block'; // ODivs[i].innerHTML = 'div展示了'; // } // } // // } //jQuery实现； $(function(){ $('#btn').click(function(){ $('div').css('display','block'); $('div').html('div展示了') }) }) </script> </html>