http://www.cnblogs.com/luotianshuai/p/5196997.html
http://www.cnblogs.com/liujianzuo888/articles/5686777.html
http://www.cnblogs.com/Wxtrkbc/p/5661047.html
http://www.cnblogs.com/wupeiqi/articles/4457274.html 【武SIR jquery 】
前端之 Jquery
一、 jquery简介
1 、jquery是什么
- jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
- jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
- 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
- jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
- jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
- jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
2 、什么是jQuery对象？
- jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
- jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
例子1：
$("#test").html() 意思是指：获取ID为test的元素内的 html 代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码：
document.getElementById(" test ").innerHTML;
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
写在前面 jquery中的$ 就是JQuery 对象，二者相等 $ = JQuery
$( ) 括号内部的值为 标签元素，得到的结果是 jquery对象，一般是一个集合，加索引取到dom对象
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#2,#3").show();
});
$('#submit').click(function(){
var input = $("#name").val();
$("#1 p").first().append(input);
var g = $("input[name='gender']:checked").val();
alert(g);
$("#1 p").first().next().append(g);
$("#2,#3").hide();
});
});
</script>
Python全栈开发之前端之 jquery
一、查找元素
1、选择器
1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")
1.2层级选择器 $(".outer div")(所有的后代) $(".outer>div")(所有的子代) $(".outer+div")(匹配所有跟在.outer后面的div)
$(".outer~div")(.outer后面的所有div)
1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even")(偶数) $("li:gt(1)")
1.4 属性选择器 $('[id="div1"]') $('["alex="sb"][id]')
1.5 表单选择器 $("[type='text']") 简写成 $(":text") 注意只适用于input标签
2 筛选器
2.1 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test") (检测li中的是否含有某个特定的类，有的话返回true)
2.2 查找筛选器
$("div").children(".test")(只考虑子元素，而不考虑所有的后代) $("div").find(".test") (考虑所有的后代)
$(".test").next() $(".test").nextAll() $(".test").nextUntil() (开区间)
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents()(祖先元素集合) $(".test").parentUntil()
$("div").siblings() (同辈元素不包括自己)
二、操作元素
1 属性操作
$("p").text() $("p").html() $(":checkbox").val()
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide")
2 CSS操作
(样式) css("{color:'red',backgroud:'blue'}")
(位置) offset() position() scrollTop() scrollLeft()
(尺寸) innerHeight()不包含边框， outerHeight()包含边框， 两个都包含padding height()不包含边框
3 文档处理
内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")
prepend() prependTo()
外部插入 before() insertBefore() after() insertAfter()
replaceWith() remove() empty() clone()
4 事件
4.1
$(document).ready(function(){}) -----------> $(function(){}) 最好都加上这一句(所有文档执行完，但是图片没加载)
4.2
$("p").click(function(){})
$("p").bind("click",function(){})
$("ul").delegate("li","click",function(){}) // 事件委托，这里需要重点注意下