大数据正式10

ゞ浴缸里的玫瑰 2022-06-05 06:24 245阅读 0赞

# 大数据正式10 #

### jQuery ###

*  定义：jQuery是一个“写的更少”，但“做的更多”的轻量级JavaScript函数库
 *  优势
    
    1.  可以简化JavaScript代码
    2.  可以像css那样获取元素
    3.  可以修改css来控制页面效果
    4.  可以兼容常用的浏览器
 *  jQuery版本支持
    
     *  未压缩版和压缩版
        
        1.  1.x 支持常用的浏览器和IE6+
        2.  2.x 支持常用的浏览器和IE9+
        3.  3.x 支持常用的浏览器和IE9+
     *  注意：jQuery不兼容老版本，因为jQuery升级除了会做一些内部优化之外，还会删除以前的一些代码，删除和添加一些方法，所有在升级之后，以前的代码可能会无法执行
 *  引入：和之前的js文件的引入是一样的
    
    #  #
    
        <script src="js/jquery-1.4.2.js"></script>

### jQuery语法 ###

*  $
    
     *  $等价于jQuery，是jQuery单词的缩写
     *  $()等价于jQuery(),该函数会返回一个jQuery对象，这个jQuery对象中包含零个或多个HTML元素
 *  文档就绪事件
    
     *  在整个html文档加载完之后立即触发，执行一些操作
     *  格式
        
        #  #
        
            $(document).ready(function(){});
     *  相当于window.οnlοad=function()\{\};
     *  简写形式
        
        #  #
        
            $(function(){});
 *  DOM对象和jQuery对象互相转化
    
     *  js对象只能调用js上提供的属性和方法，不能调用jQUery提供的属性和方法，如果非要使用，必须将js对象转化为jQuery对象，反之亦然
     *  dom对象转jQuery对象
        
        #  #
        
            var dom=document.getElementById("username");
            var $jQuery=$(dom);
     *  jQuery对象转化为dom对象
        
        #  #
        
            var $jQuery=$("#username");
            //方式1
            var dom1=$jQuery[0];
            //方式2
            var dom2=$jQuery.get(0);

### jQuery选择器 ###

*  基本选择器
    
     *  元素名选择器
        
        #  #
        
            $("div")//匹配所有的div元素
     *  class选择器
        
        #  #
        
            $("。div1")//匹配class值为div1的元素
     *  id选择器
        
        #  #
        
            $("#div2")//匹配id值为div2的元素
     *  \*号匹配符
        
        #  #
        
            $("*")//获取所有的元素
     *  多元素选择器
        
        #  #
        
            $("div,span,#h2")//匹配这些元素
 *  层级选择器
    
     *  通过DOM元素之间的层次关系来获取特点的元素
        
        #  #
        
            1. $("div span")//匹配div下的所有span对象
            2. $("div>span")//匹配div下所有的span子元素
            3. $("div+span")//匹配div后面紧邻的span对象
            4. $("div~span")//匹配div后面所有的span兄弟元素
 *  基本过滤选择器
    
     *  过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，以:开头
        
        #  #
        
            1. $("div:first")//匹配所有div中的第一个div元素
            2. $("div:last")//匹配所有div中的最后一个div元素
            3. $("div:even")//匹配所有div中的索引值为偶数的div元素，从0开始
            4. $("div:odd")//匹配所有div中的的索引值为奇数的div元素，从0开始
            5. $("div:eq(n)")//匹配所有div中的索引值为n的div元素，从0开始
            6. $("div:lt(n)")//匹配所有div中的索引值小于n的div元素
            7. $("div:gt(n)")//匹配所有div中的索引值大于n的div元素
            8. $("div:not(.one)")//匹配所有div中的class值不为one的div元素
 *  内容选择器
    
    #  #
    
        1. $("div:contians("abs")")//匹配所有div中包含abc内容的div元素
            如：<div><xxxabcccc</div>
        2. $("div:has(p)")//匹配所有div中包含p元素的div元素
            如：<div><p>aasd</p><div>
        3. $("div:empty")//匹配所有div内容为空的div元素
            如：<div>div>
        4. $("div:parent")//匹配所有div内容不为空的div元素
            如：<div><xxx</div>
 *  可见选择器
    
    #  #
    
        1. $("div:hidden")//匹配所有隐藏的div元素
        2. $("div:visible")//匹配所有可见的div元素
 *  属性选择器
    
    #  #
    
        1. $("div[id]")//匹配所有具有id属性的div元素
        2. $("div[id='d1']")//匹配所有具有id属性值为d1的div元素
        3. $("div[id!='d1']")//匹配所有具有id属性值不为d1的div元素
        4. $("div[id^='d1']")//匹配所有具有id属性以d1开头的div元素
        5. $("div[id$='d1']")//匹配所有具有id属性以d1结尾的div元素
 *  子元素选择器
    
    #  #
    
        1. $("div:nth-child(n)")//n从1开始，匹配div中的第n个元素
        2. $("div:first-child")//n从1开始，匹配div中的第1个元素
        3. $("div:last-child")//n从1开始，匹配div中的最后一个元素
 *  表单选择器
    
    #  #
    
        1. $(":input")//匹配所有的input文本框，密码框，单选框，复选框，select框，textarea框，button
        2. $(":password")//匹配所有的密码框
        3. $(":radio")//匹配所有的单选框
        4. $(":checkbox")//匹配所有的复选框
        5. $(":checked")//匹配所有的选中的单选框/复选框/option
        6. $("input:checked")//匹配所有的单选框/复选框
        7. $(":selected")//匹配所有的option选项

### 文件操作 ###

*  parent()
    
    #  #
    
        $("#d1").parent()//获取id值为d1的父元素
 *  parents()
    
    #  #
    
        $("#d1").parents()//获取id值为d1的祖先元素
    
    #  #
    
        $("#d1").parents("tr")//获取id值为d1的tr祖先元素
 *  next()
    
    #  #
    
        $("#d1").next()//获取id值为d1后面的紧邻兄弟元素
    
    #  #
    
        $("#d1").next("p")//获取id值为d1后面的紧邻兄弟p元素
 *  nextAll()
    
    #  #
    
        $("#d1").nextAll()//获取id值为d1后面的所有紧邻兄弟元素
    
    #  #
    
        $("#d1").nextAll("p")//获取id值为d1后面的所有紧邻兄弟p元素
 *  prev()
    
    #  #
    
        $("#d1").prev()//获取id值为d1前面的紧邻兄弟元素  #
        $("#d1").prev("p")//获取id值为d1前面的紧邻兄弟p元素
 *  prevAll()
    
    #  #
    
        $("#d1").prevAll()//获取id值为d1前面的紧邻兄弟元素
    
    #  #
    
        $("#d1").prevAll("p")//获取id值为d1前面的紧邻兄弟p元素
 *  siblings()
    
    #  #
    
        $("#d1").siblings()//获取id值为d1后面所有的元素
    
    #  #
    
        $("#d1").siblings("p")//获取id值为d1后面所有的p元素
 *  append()
    
    #  #
    
        $("div").append("<p>hello</p>")//为所有的div后增加一个p标签
 *  remove()
    
    #  #
    
        $("div").remove()//删除匹配的元素
 *  html()
    
    #  #
    
        $("div").html()//获取元素的html内容
        $("div").html("xxx")//设置元素的html内容
 *  text()
    
    #  #
    
        $("div").text()//获取元素的文本内容
        $("div").text("xxx")//设置元素的文本内容
 *  attr()
    
    #  #
    
        $("div").attr("id")//获取元素的id属性的内容
        $("div").attr("id","xx")//设置元素的id属性的值为xx
 *  css
    
    #  #
    
        $("div").css("width")//获取元素的样式
        $("div").css("width","200px")//设置元素的样式
        $("div").css("width","200px"，"color":"red","font-size":"24px")//设置元素的样式

### 事件 ###

*  click()点击事件
    
    #  #
    
        $("div").click(function(){});
 *  blur()失去焦点事件
    
    #  #
    
        $("input").blur(function(){});
 *  focus()获得焦点事件
    
    #  #
    
        $("input").focus(function(){});
 *  change()选项切换事件
    
    #  #
    
        $("select").change(function(){});
 *  ready()文档就绪事件
    
    #  #
    
        $(document).ready(function(){});
        //相当于
        window.onload=function(){}
        //简写形式
        $(function(){})

### 效果 ###

*  show()
    
    #  #
    
        $("div").show();//底层操作的是display
 *  hide()
    
    #  #
    
        $("div").hide();//底层操作的是display
 *  toggle()
    
    #  #
    
        $("div").toggle();//显示与隐藏互换

# JSON #

*  定义：json是JavaScript提供的一种数据交换（存储）格式
 *  格式
    
    #  #
    
        var person={
            "name":"kungfu",
            "age",18,
            "gender":"男"
        }
    
    #  #
    
        var person={
            "name":"kungfu",
            "age",18,
            "gender":"男",
            "friends":["gougou","maomao"],
            "gf",{
                "name":"hui"
            }
        }   
        var person={
            "name":"kungfu",
            "age",18,
            "gender":"男"
            "friends":[
                {
                    "name":"wk",
                    "age":12
                },{
                    "name":"pww",
                    "age":23
                }
            ]
        }
 *  语法
    
     *  \{\}括起来的就是一个对象
     *  json的属性名只能用双引号引起来，不能用单引号
     *  json的属性值
        
        1.  数字（整数或浮点数）
        2.  字符串（在双引号中）
        3.  逻辑值（true，false）
        4.  数组（在方括号中）
        5.  null
 *  json和xml比较
    
    #  #
    
        1. 可读性：xml的可读性比json有更高的可读性                                                  
        2. 解析度：xml解析比较麻烦，json是js提供的对象，可以很方便的进行解析
        3. 流行度：xml虽然发展了很多年，但是由于json易操作，所以在某些场景中json比xml更常用

# 补充 #

*  ![oV8CrxK.jpg][]

[oV8CrxK.jpg]: https://i.imgur.com/oV8CrxK.jpg