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{
            width: 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;
posted @ 2020-10-13 22:41  小胖学java  阅读(75)  评论(0编辑  收藏  举报