jquery基础入门上篇

作为一个phper,jquery总是被要求会,熟练,精通,这就是潜规则吧,总结了一部分JQUERY的非常基本入门的和常用的,给小白看的,大牛可以飘过,如果有需要jquery的版本的自己去官网下,本人也留了些历年来的版本和手册,需要的小伙伴留邮箱,给你发哈

Jquery：

         Jquery：javascript代码库

      JQ和JS关系：

                   Js：DOM，BOM，ECMAscript

                  JQ：封装了JS的BOM和DOM的部分

                   JQ是基于JS，但是强于JS

      Jquery特点：

                   文件小，资源多，用户多，兼容性，速度快，IDE

      JS的框架：

                   prototype，JQ,YUI（雅虎）,tangram（百度）,JX（腾讯）,kissy（阿里）

      JQ的知识点：

                  选择器，DOM，事件，动画，插件，ajax

      JQ下载：

                   http://jquery.com/download/

                   http://www.jq22.com/jquery-info122

                   Compressed：压缩版本：生产环境,jq2.min..js

                   Uncompressed：未压缩版本：开发环境,jq2.x..js            

                   版本：

                            2.x，完全抛弃IE6,7,8

                            1.x，兼容IE

                   推荐：1.8.3-2版本

      JQ理念：

                   Writeless，do more

      JQ的部署：

                  <script type=”text/javascript” src=”JQ文件”></script>

                   注意：必须先引入

      JQ体验：

      JQuery核心语法：

                   $(selector).action();

                   Console.log()：浏览器控制台日志打印

                   写到script标签中，建议把jq代码写到标签后面

选择器：

         选择页面元素的工具

         Jquery:javascriptquery

      基本选择器（重点）：

        

ID选择器	通过id获取元素	$(“#id名”)
element选择器	通过标签名获取元素	$(“element”)
Class选择器	通过class名获取元素	$(“.class名”)
*通用选择器	选择所有的元素	$(“*”)
群组选择器	选择多个元素	$(“selector1,selector2”)

      层级选择器（重点）：

                 

后代选择器	某个元素的后代的元素	$(“selector1 selector2”)
子选择器	某个元素的儿子	$(“selector1>selector2”)
兄弟选择器+	某个元素的紧挨着的后面兄弟元素	$(“selector1+”)
兄弟选择器~	某个元素的后面的所有的兄弟元素	$(“selector1~”)

  

   基本过滤选择器：

:first	匹配元素中的第一个元素	$(“selector:first”)
:last	匹配元素中的最后一个元素	$(“selector:last”)
：not（selector）	匹配除了selector之外的元素	$(“selector1:not(selector2)”)
:even	匹配索引位置为偶数的元素	$(“selector:even”)
:odd	匹配所有位置为奇数的元素	$(“selector:odd”)
:eq(index)	匹配指定索引位置的元素	$(“selector:eq(index)”)
:gt(index)	匹配所有大于index索引位置的元素	$(“selector:gt(index) ”)
:lt(index)	匹配所有小于index索引位置的元素	$(“selector:lt(index)”)
:header	匹配所有h标签元素	$(“:header”)

内容过滤选择器：

:contains(text)	匹配包含text文本的元素	$(“selector:contains(‘abcd’)”)
:empty	匹配为空的元素	$(“selector:empty”)
:has(“selector”)	匹配包含selector元素的元素	$(“selector:has(selector)”)
:parent	匹配作为父元素存在的元素	$(“selector:parent”)

可见性过滤选择器：

：Visible	匹配可见的元素	$(“:visible”)
：hidden	匹配不可见的元素	$(“:hidden”)

属性过滤选择器

【attr】	匹配包含attr属性的元素	$(“selector[attr]”)
【attr=value】	匹配属性attr为value的元素	$(“selector[attr=’value’]”)
【attr！=value】	匹配attr不为value的元素	$(“selecotr[attr!=’value’]”)
【attr^=value】	匹配attr以value开头的元素	$(“selector[attr^=’value’]”)
【attr$=value】	匹配attr以value结尾的元素	$(“selector[attr$=’value’]”)
【attr*=value】	匹配attr包含value的元素	$(“selector[attr*=’value’]”)

子元素过滤选择器：

        

:First-child	匹配元素的第一个子元素	$(“selector:first-child”)
:last-child	匹配元素的最后一个子元素	$(“selector:last-child”)
:nth-child(n)	匹配元素的第n个子元素	$(“selector:nth-child(n)”)
:nth-last-child(n)	匹配元素的倒数第n子元素	$(“selector:nth-last-child(n)”)
:first-of-type	匹配第一个元素	$(“selector:first-of-type”)
:last-of-type	匹配的是最后一个元素	$(“selector:last-of-type”)

表单过滤选择器：

：input	匹配所有input元素	$(“:input”)
：text	匹配所有text框元素	$(“:text”)

JQ的each:

         Size(),length获取匹配元素的个数

         Size()是方法，length是属性

      Each：

         语法：$(“selector”).each(function (index,obj){});

         Index：索引下标

         Obj：遍历进去的元素