jq笔记汇总

alert();  这是简写

window.alert(); 这是全称，所以可以直接来一个 onload = function (){}

 

jquery对象的三种表现形式

 $(document).ready(function(){

})

 $().ready(function(){

})

 $(function(){

 

})

 

js对象转换jq对象

        // js => jq

        // jq = $(js/dom)

        // jq = $(div)

        // jq = $("<li>列表</li>")

 jq对象转换成js对象

        // [0]

        // js = jq[0]

        // 例子：

        // js = $(div)[0]

        // js = $div[0]

 

 将js封装为jq

             简化前

             var div = document.querySelector(".div");

            var $div = $(".div")

            简化后

            var $div = $(".div")

 

  js封装成jq之前

             div.onclick = function(){

            }

             js封装成jq之后

             $div.click(function(){

             })

 

$("div").css("样式名称","样式值")

 

            eq 代表等于

$("li:eq(2)").css("color", "red")

             gt 代表大于

$("li:gt(2)").css("color", "green")

             lt 代表小于

$("li:lt(2)").css("color", "bule")

            li:eq(2)中li 和 :eq之间不能加空格！！！因为过滤的是li自身所以要紧挨着:eq

 

内容过滤器

           $("li:parent").css("color","red")

           $("li:parent").css("color","red")

文本节点（空格/换行）也可以起作用 用来验证里面有没有东西

            //$("li:has(.span)").css("color","red")

验证其中有无内容 选择器

            //$("li:contain(999)").css("color","red")

文本检查 检查的是文本 选择器

display:none看不见 选择器只识别display:none

 

 // 用法一

 // attr(属性名)  获取属性值

 // 用法二

// attr(属性名，属性值)  设置属性

 // $("span").attr("data-id","1002")//设置属性

// console.log($("span").attr("id"))//获取属性值

 // console.log($("span").attr("data-id"))//获取属性值

 

没有参数时为获取，带参数时为设置

html 获取包含html标签的代码 div<span>span</span>

text 获取纯文本 div、span

val 获取交互控件（表单控件，比如单选框）的值  ""

html 和 text 的区别

在设置时，html会解析其中的标签，text不会解析，只是原样输出

 

 

 

事件处理

             委托on响应click事件对li进行操作

            $("ul").on("click","li",function(){

                console.log($(this).text())

            })

            $("ul").on("click bdlclick","li",function(){

                console.log($(this).text())

 

 筛选

            // $("li:first")

            // $("li").first()

            // 上面这俩效果相同

            // $("li:eq(2)")

            // $("li").eq(2)

            // 上面这俩效果相同

            

内部插入 => 子节点

            $(".append").click(function () {

                // 后面

                // 方法一

                $("ul").append("<li>列表append</li>");

                // 方法二

                // $("<li>列表append</li>").appendTo($("ul"));

                // 上面这俩是append和appendTo的用法区别

            })

            $(".prepend").click(function () {

                // 前面

                // 方法一

                $("ul").prepend("<li>列表prepend</li>");

                // 方法二

                // $("<li>列表prepend</li>").prependTo($("ul"));

                // 上面这俩是prepend和prependTo的用法区别

            })

 

/外部插入 => 兄弟节点

            $(".before").click(function(){

                // 上面

                $("ul").before("<li>列表before</li>");

            })

            $(".after").click(function(){

                // 下面

                $("ul").after("<li>列表after</li>");

            })