前端学习之-Jquery

jquery简介:
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team.


寻找元素(重要的选择器和筛选器)
选择器
2.1.1 基本选择器      $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

2.1.2层级选择器       $(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

2.1.3 基本筛选器      $("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

2.1.4 属性选择器      $('[id="div1"]')   $('["alex="sb"][id]')

2.1.5 表单选择器      $("[type='text']")----->$(":text")
                     注意只适用于input标签$("input:checked")

筛选器
2.2.1  过滤筛选
$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

2.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()



操作元素(属性 CSS 和 文档处理)
.1 属性操作
val:价值  attr:属性
$("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")

CSS操作3.2
3.2.1(样式)
css("{color:'red',backgroud:'blue'}")

3.2.2(位置)
offset()
position()
scrollTop()
scrollLeft()

3.2.3(尺寸)
height()
width()


3.3 文档处理

内部插入  $("#c1").append("<b>hello</b>")     $("p").appendTo("div")

                   prepend()    prependTo()

外部插入  before()  insertBefore()  after insertAfter()

                     replaceWith()   remove()  empty()  clone()


3.4 事件

3.4.1

    $(document).ready(function(){}) -----------> $(function(){})

3.4.2

    $("p").click(function(){})

    $("p").bind("click",function(){})

    $("ul").delegate("li","click",function(){})


3.6 扩展(插件机制)

 jquery.extend({})
 jquery.fn.extend({})

####################################################################

运用jquery:
方法一：
对需要处理的地方绑定onclick函数：
例如：
<div class="div1" onclick="show(this)"><div/>
jquery的地方写法：
<script>
    function show(self){
    $(self).next().removeClass("hide");
    $(self).parent().siblings().children(".con").addClass("hide");
}
<script/>

方法二：
不在html文件里进行绑定函数，而是在jquery里统一进行处理：
例如：
<script src="js/jquery-2.2.3.js"><script/>
<script>

    $(document).ready(function(){
        $("hide").click(function(){
            $("p").hide(1000);
});

        $("#show").click(function(){
            $("p").hide(1000);
})
})

<script/>

方法三：
<script src="/static/js-3.1.1.js"><script/>
<script>

    $(document).ready(function){
        bindAddEvent();
        bindDelEvent();
}

    function bindAddEvent(){
        $(".calss").click(function(){
            $("p").addclass("hide");
})
}

    function  bindDelEvent(){
        $("#id").click(function(){
            $("name").removecalss("hide");
})
}
<script/>