Python自动化开发从浅入深-进阶（script,dom,jquery 基础）

Posted 2020-07-08

• 　javascript （可以对html标签及CSS进行操作）

•     Dom （API，提供找寻html中的标签，以便于使用JS对所找到的标签或CSS进行相应的操作）

•     jQuery （用于将复杂的逻辑和运算封装到一个包中供外部调用）

 

JavaScript:

    <srcipt>...</script>

    存在的形式：文件，块

    一般在body的底部书写。

 

    --- 声明变量：

              name = "alex" ；(全局变量)

              var age=18；     （局部变量）

   --- 数字：

        var age = "18";

        console.log(age,typeof age);

        age = parseInt(age);

        console.log(age,typeof age);

 

        var age = "18.9";

        console.log(parseInt(age));

        console.log(parseFloat(age));

        Number(‘123‘);

        parseInt(‘123‘);

  --- 字符串：可在浏览器中的console调试。

        var name = "abc";

        var name = "abc      ";

        name.trim();    去掉字符串尾部的空字符

        name.charAt(0);  获取第一个字符a

        name.substring(1,2); 获取等于1小于2中间的数据，这里是b

  --- 布尔：

        Boolean(1)

            true

        Boolean(0)

            false

 

  --- 数组：

    var li = [11,22,33];

    var n = [44,55,66];

    var li = Array(11,22,33);

    li.push(88); 往li放入88 （往后插入数据）

    li.unshift("abc"); 往li中放入字符串（往前插入数据）

    li.splice(1,0,‘alex‘); 在1这个位置放入‘alex‘字串，参数0是固定写法。

    i = li.pop();  将li尾部数据移出，并赋值给i (从尾部移出)

    i = li.shift(); 将li的头部值移出，并赋值给i （从头部移出）

    li.splice(1,2); 将li中1位置开始的元素取出2个（第一个参数是为位置，第二个参数是个数）

    li.slice(0,2); 切片，从0位置，到2（不计算在内），这里是11,22

    m = li.concat(n); 联合，将li和n联合到一起，并赋给m

    li.reverse()；自身翻转变为33,22,11

    m = li.join(‘-‘);  ‘-‘为分隔符，11-22-33

    name = ‘zhaohong‘;

    name.length; 获取字符串长度

 

--- 字典：

    dic = {"k1":‘v1‘} 创建字典，是一个对象

 

--- 序列化和反序列化：

    s = JSON.stringify(dic)  将dic字典序列化为一个字符串

    m = JSON.parse(s)  将序列化的s，进行反序列化为一个对象

    

-- undefined

    var name = "jake"

        undefined

 

如果对于定义的变量未赋予值，则为undefined

如：var ss,  ss显示为undefiled, 布尔值为false

 

name = null 指向了一个特殊地址，null的布尔值为false

 

--- 循环语句：

    li = [11,22,33,44];

    for(var item in li){

        console.log(item);  //输出为索引

    }

 

    var dic = {‘k1‘：11,‘k2‘:22};

    for(var item in dic){

        console.log(item) //输出为key

    }

 

    for(var i=0;i<100;i++){

        console.log(i);

    }

 

    

     for(var i=0;i<li.length;i++){

        console.log(i);

    }

 

 

while(true){

    

    continue;

    break;

}

和python中的while循环一样

 

--- 条件语句：

     if（条件）{

}else if（条件）{

}else{

 

}

 

switch(name){

    case 1:

        console.log(‘111‘);

        break;

    case ..:

    

    ....

 

    default:

        ....

}

 

 --- 异常处理：

    try{

 

    }catch(e){

 

    }finally{

 

    }

 

 

 ---  Dom让js动起来

       obj = Foo()

       obj.xx

        document

        1、先查找元素，再操作元素。

        2、getElementsByTagName()

        3、getElementById();

        4、getElementsByClassName();

 

    

 

    <div>

            <div id="n1">c1</div>

            <a>test</a>

            <ul>

                <li>a</li>

                <li>b</li>

                <li>c</li>

            </ul>

    </div>

    <script src="" type="text/javascript">

        var nid = document.getElementById(‘n1‘)

        nid.innerText;                 查看标签内容

        nid.innerText = "jake";   设置标签内容

 

        var li_list=document.getElementByTagName(‘li‘);

        for var i in li_list){

            var item = li_list[i];

            item.innerText=i;

         }

    </script>

    

    

   将div的文本c1改为alex, console.log(nid.innerText); 显示标签内容

   

   input内的值需要用.value获取

        console.log(username.value,pwd.value);

 

    <div>

            <div id="num">1</div>

            <input type="button" value="+1" onclik="Add();" />

    </div>

    <script type ="text/javascript">

        var nid = document.getElementById(‘num‘);

        var text = nid.innerText;

        text = parseInt(text);

        text += 1;

        nid.innerText = text;

    </script>

 

    步骤：

        1、找到num

        2、获取内容

        3、自增

 

1、事件

2、选择查找（选择器）

3、内容修改获取

    innerText -标签中间文本内容

    innerHTML-标签中间内容

 

    特殊的：

        input , select , textarea使用value获取值

 

 

--- 搜索框例子：

    1、onfocus，onblur

    2、选择搜索框。

    3、获取搜索框内容 value

 

<body>

    <input type="text" id="search" value="请输入关键字" onfocus="Focus();" onblur="Blur();" />

    <script type="text/javascript">

            function Focus(){

                var nid=document.getElementById(‘search‘);

                var value=nid.value;

                if(value=="请输入关键字"){

                    nid.value="";

                }

            }

 

            function(){

                var nid=document.getElementById(‘search‘);

                var value=nid.value;

                if(!value.trim()){

                    nid.value = "请输入关键字"；

                }

            }

    </script>

</body>

 

 

---- 创建标签：

    <script>

        //创建标签，添加到container中

        var nid=document.getElementById(‘container‘);

        var tag = "<input type=‘text‘ />"

        container.insertAdjacentHTML(‘beforeBegin‘,tag)

    </script>

    

    

    var creatObj = documet.createElment(‘a‘);

    createObj.href = "http://www.etiantian.org";

    createObj.innerText = "老男孩教育";

    

    var nid = document.getElementById(‘container‘);

    nid.appendChild(createObj);

    

 

--- 设置标签属性：

    nid.setAttribute(‘name‘,‘aaa‘)

    getAttribute

    delAttribute

 

 

---- 表单：

    <body>

        <form action="/tijiao" method="post">

            <input name="query" type="text" />

            <input type="submit" value="提交" />

        </ form>

    </body>

   

 

-- 页面刷新：  window.location.reload()

-- 页面跳转： windows.location.href = "http://www.etiantian.org"

 

-- 定时器：

    <script>

        setInterval("操作"，“间隔”)

        setInterval("alert(‘123‘)"，2000)

    </script>

--- 筛选器：

    <table>

        <tr><td>Header 1</td></tr>

        <tr><td>Value 1</td></tr>

        <tr><td>Value 2</td></tr>

    </table>

 

    $("tr:eq(1)")

    $(‘tr‘).eq(1)

 

    num = input()

    temp = "tr:eq("+ num +")"

    $(temp)