JQuery

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do
more(写得更少,做得更多)。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari
2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

一、查找元素

  1. 常用选择器
#基本选择器
$("*")   
$("#id")
$(".class")
$("element")
$(".class,p,div")

#层级选择器
$(".outer div")    // 所有的后代
$(".outer>div")    // 所有的子代 
$(".outer+div")    // 匹配所有跟在.outer后面的div
$(".outer~div")    // .outer后面的所有div

#基本筛选器
$("li:first")   // 所有li标签中第一个标签
$("li:last")    // 所有li标签中最后一个标签
$("li:even")    // 所有li标签中偶数标签
$("li:odd")     // 所有li标签中奇数标签
$("li:eq(2)")   // 所有li标签中,索引是2的那个标签
$("li:gt(1)")   // 所有li标签中,索引大于1的标签

#属性选择器
$('[id="div1"]')  
$('["alex="sb"]')
$("input[type='text']")

2、常用筛选器

# 过滤筛选器
$("li").eq(2)    // 和:eq是一样的
$("li").first()    // 和:first是一样的
$("li").last()    // 和:last是一样的
$("ul li").hasclass("test")   // 检测li中的是否含有某个特定的类,有的话返回true

#查找筛选器
$("div").children()  // form中的子标签
$("input").parent()   // input标签的父标签
$("form").next()      // form标签下一个标签
$("form").find(:text,:password)   // form标签中找到:text,:password标签
$("input").siblings()   // input的同辈标签

二、操作元素
1、属性操作

$(":text").val()                  // text输入的内容
$(".test").attr("name")       // test类中name属性对应的值
$(".test").attr("name","sb")  //  设置test类中name属性对应的值
$(".test").attr("checked","checked")  // 设置test类中checked属性对应的值为checked
$(":checkbox").removeAttr("checked")  // 删除checkbox标签中的checked属性
$(".test").prop("checked",true)   // 设置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()
 
标签内容处理                    
         remove() 
         empty() 
         clone()

4、事件

$("p").click(function(){})
$("p").bind("click",function(){})                   
$("ul").delegate("li","click",function(){})  // 事件委托,延迟绑定事件的一种方式

图像插件:http://fontawesome.io/

jquery插件:http://www.jeasyui.net/

jquery插件:http://jqueryui.com/

bootstrap:http://www.bootcss.com/

轮播插件:http://bxslider.com/

延迟加载插件:http://www.w3cways.com/1765.html 实例

AngularJs:https://angular.cn/

原文地址:https://www.cnblogs.com/flyhgx/p/6666845.html