• JavaScript


    JSON

    什么是JSON

    • JSON是一种数据交换格式,并且基于js语法子集的一种开放格式,一般是给程序进行读取的,采用完全独立其他编程语言来存储数据,层次结构使得json成为一种数据交换语言。

    对象转化为JSON字符串

    JSON.stringify();
    

    JSON字符串转化为对象

    JSON.parse();
    

    操作BOM对象

    BOM:浏览器对象模型

    window 代表浏览器窗口

    location 代表当前页面的URL信息

    screen 代表屏幕尺寸

    document 代表当前页面,HTML 文档树

    var id=document.getElementById();
    

    history 代表历史记录

    操作DOM对象(重点)

    DOM: 文档对象模型
    <div id="add">
    </div>
    <script type="text/javascript">
        var id=document.getElementById('add');
    </script>
    

    更新DOM节点

    <div id="add">
    </div>
    <script type="text/javascript">
        var id=document.getElementById('add');
        id.style.color='red';
        id.innerText='123';
        id.style.padding="10px";
    </script>
    

    删除节点

    步骤:先获取父节点,在通过父节点删除自己

     var self=document.getElementById('p1');
       var father = self.parentElement;
       father.removeChild(self);
    

    插入节点

    注意:使用InnerHTML插入的话,会覆盖之前的节点内容

    • 可以使用appendChild()追加
     father.appendChild(id);
    
     //通过JS 创建一个新的节点
        var newP =document.createElement('p');
        newP.id='newpp';
        newP.innerText='hello js';
        //追加
        father.appendChild(newP);
    
     //创建一个script标签,给标签设置type属性并赋值;
        var mySrcipt=document.createElement('script');
        mySrcipt.setAttribute("type","text/javascript");
    

    jQuery

    jQuery库,里面存储着大量的JavaScript函数

    //jQuery万能公式
    $(select).action();   //action(事件) select(id选择器,class选择器)
    
    jQuery事件

    鼠标事件

    //获取鼠标移动事件
    <script src="lib/jquery-1.5.1.js"></script>
        <style>
            #divMove{
                 500px;
                height: 500px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
    <div id="divMove">
        move:<span id="SpanMove"></span>
    </div>
    <script>
        $(function () {
           $('#divMove').mousemove(function (e) {
              $('#SpanMove').text('x'+e.pageX+'y'+e.pageY)
           })
        })
    </script>
    

    操作DOM元素

    节点文本操作

    $('#ul li[name=python').text();   //获取ul下的li标签中的值
    $('#ul li[name=python').text(‘设置’);   //设置ul下的li标签中的值
    $('#ul').html();   //获取ul标签中的值
    $('#ul').html(‘设置’);   //设置ul下的li标签中的值
    

    css操作

    $('#id').css({"color","red"});
    

    元素的显示和隐藏 本质:display :none

    $('#id').show;
    $('#id').hide;
    
  • 相关阅读:
    硬件_WIFI&Blue
    C++_练习—多态_纯虚函数与抽象类
    C++_练习—多态_验证vptr分布初始化
    C++_练习—多态_证明vptr指针的存在
    单摆方程
    谐振动相关知识
    UVa 129
    LeetCode-316
    Java 运算符
    一些特殊的矩阵
  • 原文地址:https://www.cnblogs.com/xiaopanjava/p/13811889.html
Copyright © 2020-2023  润新知