jQuery 笔记

jQuery
jQuery
    http://jquery.cuishifeng.cn/
    jQuery类库=Python的模块
    DOM/BOM/JavaScript的类库
    版本问题PS:
        jQuery 三个版本
        1.x  最好这个
        2.x
        3.x

        转换:
            jQuery对象[0] 就为DOM对象
            $('l1')[0]  = document.byElementById('l1')

            var c = document.byElementById('l1')
            $(c) 这就是DOM对象转为jQuery对象 $(Dom对象)

    1.查找元素
        DOM
            10个左右
        jQuery
            很多个

            选择器  直接找到某个或某类标签
                    1.id
                       $('#id')
                    2.class
                        <div class = 'c1'></div>
                        $('.c1')
                    3.标签  $('a')  就把所有的a标签
                        <div class = 'c2'>
                            <a>f<a>
                            div class = 'c1'>
                                   <div class="c3"></div>
                                <div>
                     4.组合选择器（逗号） $('a,.c2，#id') 把a标签和c2标签都找到
                     5.$('#i10 a')（空格）子子孙孙 先找到id为i10的标签 再从i10标签下找a标签 #i10 a都打印  层级
                     6.$('#10>a')（>） 找#10下的儿子
                     7.$('a:first') #找到a标签 然后选第一个
                     8.$('a:last') #找到a标签 然后选最后一个
                     9.$('a:eq(x)') #x索引值 索引以0开始 找到a  a a a 0开始
                     基本的:  first last eq() 三个！！ not除了其以外 都列出来

                     10. 属性 根据属性进行查找标签
                        第一种 如alex= '123' $('[alex]') 就可以找出标签 如 a a
                        第二种 如alex = '456' $('[alex = "456"]') 就会找出属性为alex=456的标签a
                        第三种 $("input[type='text]") 找出input type
                        <input type='text' disabled/>
                        <input type='text'/>
                        <input type='file'/>
                        <input type='password'/>
                        $(':disabled') 将disabled所在的input标签找出来

             实例：
                多选，反选，全选
                $("#tb:checkbox").prop("checked"); 获取值
                $("#tb:checkbox").prop("checked"， true); 设置值  prop主要针对 cheked 和 select操作

                jQuery方法内置循环: #('#tb:checkbox').xxxx方法
                $("#tb:checkbox").each(function(k)){
                    //k当前索引
                    // this DOM  当前循环的元素$(this)
                }

                三元运算
                    var v = 条件? 真值 : 假值
            筛选
            一起完成在整个页面进行查找完成
                加样式
                <div id = 'i1' class = 'content hide'>内容<div>
                $('#i1').addClass('hide')   给id为i1的标签 添加hide样式
                删样式
                <div id = 'i1' class = 'content hide'>内容<div>
                $('#i1').removeClass('hide')   给id为i1的标签 移除hide样式

                筛选器
                    $("#i1").next()下一个标签（同级） nextAll()下面所有  截止到 nextUntil("#i1")
                    $("#i1").prev()上一个标签        prevAll()上面所有  截止到 prevUntil("#i1")
                    $("#i1").parent()找父标签      parents()家族 截取 parentsUntil(".c1")
                    $("#i1").children()孩子标签
                    $("#i1").siblings()获取所有的兄弟标签
                    f$("#i1").find() $('#i1').find('#i2')在i1的子子孙孙找i2
                    在# text()获取内容

                    筛选器$('l1').eq(1)  = 选择器里的 $('l1:eq(1)')

                jQuery支持链式编程  $(this).next().removeClass('hide').parent().siblings().find('.content')
                绑定事件 $('.header').click(function () {})

    2.操作元素：

实例：
        1.模态对话框
        2.内容操作  文本操作
        $("#i1").text()     #获取文本
        $("#i1").text("a")  #设置文本内容为a  不解析html
        $('#i1').html()     #获取html内容
        $('#i1').html("<a>1</a>") #设置html内容

        输入input select velue
        $('#i1').val()  获取value的内容
        $('#i1').val('a')设置值 value = 'a'

        样式操作
            addClass
            removeClass
            toggleClass = 有则removeClass样式  没有则addClass样式

            $("#i1").click(function () {
            if($('.c1').hasClass('hide')) {
                $('.c1').removeClass('hide');
            }else{
                $('.c1').addClass('hide');
            }
        })

        $('.c1').toggleClass('hide'); //与上面一致  有Hide就remove 没有hide就退出

        属性操作：
            $('#i1').attr()  专门用于做自定义属性  $('#i1').attr('value')=开关 $('#i1').attr('value','哈哈')  value = "哈哈"
            $('#i1').attr(key,content)
            $('$i1').removeAttr('value') 删除value属性

            <input type='checkbox' id = 'i1'>
            $('#i1').prop() #专门用于checkbox, radio操作
            $('#i1').prop('checked',true)设置为true
            $('#i1').prop('checked')获取checked的值

            PS:
                .index()获取索引位置


        文档处理：
            append()
            prepend()
            after()
            before()
            remove() 清除标签
            empty() 清空内容

            clone()