day14 jQuery

day13-14   jQuery
jQuery是对js和dom的封装，相当于一个类库
使用jQuery的目的：
    1：获取标签
    2：修改
jQuery提供的方法：http://www.php100.com/manual/jquery
    查找：选择器-筛选器
        选择器
            基本选择器
            //$=jquery
            $.('#n1').text('xxxooo')    找id=n1的标签，并赋值为xxxooo
            $('div')                    找到div的标签
            $('.n1')                    class="n1"的标签
            $('.c1,a,#n2')              找class=c1和a标签和id=n2的标签（组合选择器）
            $('#n3 div .c3 span a')     找id=3下的div下的class=c3下的span下的a标签（层级选择器）

        筛选器
            $("p").eq(1)                找到p标签下的第一个元素（计数从0开始）
            **查找
                $("div").children()     找到div下的所有子标签（子元素，不是孙子）
                find                    去子子孙孙里去找
                $("div").next           div的下一个标签（同一级）    nextall()  下一个所有的
                prev                    上一个
                $('.c1').siblings       除了c1以外的所有兄弟
                parent                  找父标签
                parents                 一直往上找

    属性
        attr          加俩参数是设置属性，一个参数是获取。    //$('#c1').attr('alex','sb')        $('#c1').attr('hhh')
                      标签中所有属性都使用，除：checkbox，radio
                      prop专门用于对checkbox和radio设置，见全选取消的例子
        addClass
        removeClass
        toggleClass    有的话取消，没有的话就加上

    for 循环
        .each         见全选反选取消的例子
            $('table :checkbox').each(function(){
                    //每一个循环都执行该方法体，相比js的for循环少了很多代码
                    //执行的内容
                        })

            var userlist = [11,22,33,44]
            $.each(userlist,function(i,item){
                    //js的for循环只获取下标，jq的each既可以获取下标也可以获取值
                    console.log(i,item)
                        })

    内容选择器
        html()          获取标签与标签之间的内容包括html
        text()          只获取文本
        val()           获取值，专门用于搞input系列select textarea
        以上三个可以无参数可以一个参数，无参数表示获取，一个参数表示设置

    jQuery的CSS部分
        .scrolltop()         计算滚动条滚动了多少，也可以设置上值用于返回顶部的例子,返回顶部有个style='overflow:auto',这样就会又会出现一个滚动条，滚动条里套滚动条

            window.onscroll = function(){           //滚动一次滑轮执行一次这个函数，见返回顶部的例子
                    console.log(123);
                            }

        .scrollleft()        左右滚动条

        .offset()            距离左上角的位置
         position            相对于父标签的位置距离
         height              当前标签的高度
         width               当前标签的宽度

    文本操作文档处理
        .append                 在标签里边内容的后面加
         brefor
         after
         empty                  清空标签里的内容
         remove                 移除标签
         detach                 相当于剪切
         clone                  复制

    jQuery事件
        普通的js绑定事件每一个标签绑定一个，jq直接用选择器选择某类标签，绑定事件
        $('li').click(function(){
            var temp = $(this).text()
            alert(temp);
                    }
            //全部的页面执行完才执行的它

        第一个写法
        $(document).ready(function(){
                //当前文档准备就绪就去执行它
                        })
        第二个写法
         $(function(){

                })

         绑定事件
         $(XXX).click(function(){})
         $(XXX).bind(function(){})
         $('ul').delegate('li','click',function(){})

         delegate   委托，默认不绑定，触发的时候再去绑定
         bind       和click一样
         unbind     移除
         undelegate 移除
巴特西

day14 jQuery

最新文章

热门文章
