Jquery 简明介绍

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 

URL： http://www.php100.com/manual/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对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错。

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

          var $variable = jQuery 对象

          var variable = DOM 对象。

 基本语法：$(selector).action() 

 写在前面 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>

来源： http://www.cnblogs.com/liujianzuo888/articles/5686777.html

---

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(){})　　// 事件委托，这里需要重点注意下

来自为知笔记(Wiz)