一篇文章带你入门和了解Jquery的基础操作

目录

  • 1.Jquery的使用步骤:
    • (1)导入js库
    • (2)页面载入事件
  • 2.Jq对象和js对象的转换
    • (1)js对象------>jq对象
    • (2)jq对象------>js对象
  • 3.jq的基本选择器
    • //(1)jq的id选择器
    • //(2)jq的class选择器
    • //(3)表单选择器
    • //(4)element选择器
  • 4.jq的层级选择器
    • 5.过滤选择器
      • 6.属性选择器
        • 7.jq文档处理
          • 总结

            1.Jquery的使用步骤:
            (1)导入js库
            ?//js/jquery-1.11.3.min.js压缩版(推荐)//js/jquery-1.11.3.js完整版


            (2)页面载入事件
            $(document).ready(function(){业务操作 ; }); ?//优化后:$(function(){业务操作; });


            2.Jq对象和js对象的转换
            (1)js对象------>jq对象
            var js对象 = document.getElementById("id属性值"); var $jq对象 = $(js对象)


            (2)jq对象------>js对象
            var js对象 = $jq对象.get(index) ;


            3.jq的基本选择器
            //(1)jq的id选择器
            $("#id属性值").绑定事件方法(function(){业务操作 ; });


            //(2)jq的class选择器
            $("#.class属性值").绑定事件方法(function(){业务操作 ; });


            //(3)表单选择器
            $("选中的input标签[带指定属性的标签]").绑定事件方法(function(){业务操作 ; });


            //(4)element选择器
            $("元素/标签").html("XXX") ;


            4.jq的层级选择器
            //后代选择器$("父标签 子标签")?//子元素选择器$("父元素>子元素")


            5.过滤选择器
            $("标签:first")//匹配的是第一个标签$("标签:even")//匹配的是从0开始的偶数个标签(0,2,4...)$("标签:odd")//匹配的是从1开始的奇数个元素(1,3,5...)

            【一篇文章带你入门和了解Jquery的基础操作】
            6.属性选择器
            [attribute]//匹配的是当前给定的属性的元素[attribute=value]//匹配的是给定的属性是某个特定值的元素[attribute!=value]//匹配所有不含有指定元素的属性,或属性不等于特定值的元素[attribute^=value]//匹配的是以指定元素开始的特定的元素[attribute$=value]//匹配以指定元素结尾[attribute*=value]//匹配给定的属性是以包含某些值的元素[selector1][selector2]...[selectorN]//符合属性选择器.同时满足多个属性条件的元素


            7.jq文档处理
            //追加append(content)//向每个匹配的元素内部追加内容(推荐)jq对象.appendTo(comtent)//把匹配的内容追加到另一个指定元素集合中?//前置prepend(content)//把每个匹配的元素放到content前面去prependTo(content)//把所有匹配的元素前置到另一个指定的元素集合中?//插入after(content|fn)//在每个匹配的元素之后插入内容insertAfter(content)//将匹配的元素插入到content后面去before(content)//将每个匹配的元素之前插入内容insetBefore(content)//将每个匹配的元素插入到content之前


            总结 本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

              推荐阅读