前端jquery入门到实战
为什么要学习Jquery?因为生活。
案例：
"zh-CN">
dashu
"button" value="展示" id="btn1" >
"button" value="设置内容" id="btn2" >
复制代码 使用jquery案例：
"zh-CN">
dashu
"button" value="展示" id="btn1" >
"button" value="设置内容" id="btn2" >
复制代码 jquery
快速的，轻量级的，功能丰富的 js 库。动画(animation)，ajax，DOM，更简单，容易使用的api。
jquery api 文档
开发环境，测试环境，生产环境
git svn
$(function 复制代码
jq对象和Dom对象
复制代码 $ 其实就是一个函数 function
typeof $
$();
复制代码 参数不同，功能不同
$(function function "div" ) $("#btn" ) $(".class" )
复制代码 基本选择器
jquery选择器是jquery提供的一组方法，用来方便我们找页面中的元素，jquery选择器返回的是jquery对象。
:first 获取第一个元素
示例： 获取匹配的第一个元素
$('li:first' );
复制代码 基本选择器：
$(function "#sb" ).css("backgroundColor" , "yellow" );
// $("#sb" ).css("backgroundColor" , "green" );
});
// 交集，并集
$("#id, .green" ).css("color" ,"red" );
$("li.green" ).css();
复制代码 jquery的样式
css(name, value)
name: 样式名 value: 样式值
复制代码 基本选择器
id选择器
类选择器
标签选择器
并集选择器 $("#id, .green" ).css("color" ,"red" );
交集选择器 $("li.green" ).css();
复制代码 层级选择器
子代选择器 $("ul>li" );
后代选择器 $("ul li" );
复制代码
// 获取3 子代元素
复制代码
mouseenter与mouseover
复制代码
下拉菜单
$(function ".wrap>ul>li" ).mouseover(function "哈哈" );
});
});
复制代码
高亮
$(".wrap>ul>li" ).mouseenter(function "opacity" ,"1" ).siblings().css("opacity" ,"0.5" );
});
复制代码 选择器:
children(selector); 子代
find(selector); 后代
siblings(selector); 查找兄弟不包括自己
parent(); 查找父亲
复制代码
手风琴
$(function ".groupTitle" ).click(function "groupTitle" >标题
标题
复制代码 $(this).next().slideDown(1000).parent().siblings().children("div" ).slideUp(1000);
复制代码
复制代码 基本，层次，过滤，表单选择器
jquery操作样式
css(name, value);
$("#day" ).css("background" ,"gray" );
$("#day" ).css({
backgroundColor:"pink" ,
color:"red"
});
复制代码
轮播图
.slider{
height: 300px;
width: 700px;
margin: 100px auto;
position: relative;
}
.slider li {
position: absolute;
display: none;
}
.slider li:first-child {
display: block;
}
"arrow">
"arrow-left" > <
"arrow-right" > >
复制代码
动画效果
show()显示，hide()隐藏
slideDown()滑入，slideUp()滑出，slideToggle()切换
fadeIn()淡入和fadeOut()淡出和fadeToggle切换
"button" value="开始" >
"button" value="结束" >
复制代码 swing是秋千的效果速度，到最上慢，下来就变快了，而linear是线性匀速的效果动画。
手风琴效果
复制代码
复制代码 var $li = $("ul>li" );
$li .mouseenter(function "ul" ).stop().slideDown();
});
$li .mouseleave(function "ul" ).stop().slideUp();
});
复制代码
音乐导航条
复制代码
复制代码
创建节点，与添加
append appendTo
prepend prependTo
before 作为兄弟元素前
after 作为兄弟元素后
复制代码
复制代码
复制代码
城市选择
$(function "#btn1" ).click(function "#city > option" ).appendTo("#citys" );
});
$("#btn2" ).click(function "#citys" ).append($("#city>option" ));
});
$("#btn3" ).click(function "#citys:selected" ).appendTo("#city" );
});
});
复制代码
清空和删除节点
复制代码 内存泄漏的是一块内存被占用，别人用不了。
发布内容
"box" id=
"fabu" >
发布
"btn">发布
复制代码
弹幕
复制代码 操作节点：
创建节点：
$(" )
复制代码 添加节点：
append appendTo
prepend prependTo
after before
复制代码 清空内容：
empty();
复制代码 删除节点:
remove();
复制代码 克隆节点：
clone ();
复制代码 动画效果
show() hide()
slideDown() slideUp() slideToggle()
fadeIn() fadeOut() fadeToggle()
stop()
animate()
复制代码 class操作：
addClass(name)添加类
removeClass(name)移除类
hasClass(name)判断类
toggleClass(name)切换
复制代码 css(name,value)设置单个样式
css(obj)设置多个样式
css(name)获取样式
复制代码
val()方法
val方法用于获取和设置表单元素的值
//设置值
$("#name" ).val("dashucoding" );
//获取值
$("#name" ).val();
复制代码 // html == innerHTML获取内容和标签
// text == innerText获取内容
//设置内容
$("div" ).html("内容 " );
//获取内容
$("div" ).html()
//设置内容
$("div" ).text("内容 " );
//获取内容
$("div" ).text();
复制代码 // 获取页面可视化的宽度和高度
$(window).width();
$(window).height();
$(window).resize(function "div" ).width()); // width
console.log($("div" ).innerWidth()); // padding +width
console.log($("div" ).outerWidth()); // padding+width+border
console.log($("div" ).outerWidth(true )); // padding + width + border + margin
复制代码
scrollTop与scrollLeft的方法
设置或者获取垂直滚动条的位置
// 获取页面被卷曲的高度
$(window).scrollTop();
// 获取页面被卷曲的宽度
$(windwo).scrollLeft();
$(window).scroll(function 复制代码
固定导航
复制代码
小火箭返回顶部
复制代码 offset()方法获取元素的相对于document的位置，position()方法获取相对于定义的父元素的位置。
复制代码 简单的事件绑定，bind事件绑定，delegate事件绑定，on事件绑定
click(handler)
mouseenter(handler)
mouseleave(handler)
$("#btn" ).click();
$("#btn" ).trigger("click" );
复制代码 delegate委托事件
$("div" ).delegate("p" , "click" , function "p" ).on("click" ,function "呵呵" );
});
$("#btn" ).on("click" ,function "我是
" ).appendTo("div" );
});
$(selector).on("click" ,function "click" ,"span" , function 复制代码
事件解绑
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click" ); // 解绑指定的事件
复制代码 $(selector).undelegate(); // 解绑所有的delegate事件
$(selector).undelegate("click" ); //解绑所有的click事件
复制代码 on // off
$("p" ).on("click" , function "dashu" );
});
//$("p" ).off();
$("p" ).off("mouseenter" );
// toggle:切换 trigger:触发
复制代码
jquery事件对象
$(document).on("click" ,function (e){
})
on(types, selector, data, callback)
复制代码
钢琴例子
复制代码 $(document).on("keydown" , function (e){
// console.log(e.keyCode);
});
复制代码 节流阀，按下的时候，触发，如果没弹起，不让触发。
delay(duration,[queueName]);
设置一个延时效果
duration, [queueName]
duration:延时时间
queueName:队列名词
复制代码
延时
复制代码
五角星
* {
padding: 0;
margin: 0;
}
.comment li {
float : left;
}
.comment{
font-size: 30px;
color:
}
var k = "☆" ;
var s = "★" ;
$(".comment>li" ).on("mouseenter" ,function ".comment" ).on("mouseleave" ,function "li.current" ).text(s).prevAll().text(s);
});
$(".comment>li" ).on("click" , function "current" ).siblings().removeClass("current" );
});
$(this).text(s).preAll().text(s).end().nextAll().text(k);
复制代码
each方法
$(selector).each(function (index,element){});
复制代码 $控制权：
$.noConflict();
jQuery(function 复制代码 val()
text() 和 html()
width height
scrollTop scrollLeft
offset position
复制代码 on("click" , function "click" , "p" , function "click" )
click() trigger("click" );
e.stopPropagation()
e.preventDefault()
$.noConflict();
复制代码 插件
插件支持颜色 jquery.color.js
animate不支持颜色
复制代码 懒加载
"img/example.jpg" width="640" height="400" >
$("img.lazy" ).lazyload();
复制代码
自定义插件
Array.prototype.say = function "dashu" );
}
var arr = new Array();
arr.say();
复制代码 jQuery.prototype.say = function "dashu" );
}
$(document).say();
$.fn == jQuery.prototype
$.fn.say = function "dashu" );
}
$(document).say();
// 链式编程
$.fn.say = function "dashu" );
return this;
}
复制代码 结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
达叔小生：往后余生，唯独有你 You and me, we are family ! 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通 简书博客： 达叔小生 www.jianshu.com/u/c785ece60…
结语
下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
小礼物走一走 or 点赞
