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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Python自动化开发从浅入深-进阶(script,dom,jquery 基础)相关的知识,希望对你有一定的参考价值。

  •     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)
  

 

 

  

以上是关于Python自动化开发从浅入深-进阶(script,dom,jquery 基础)的主要内容,如果未能解决你的问题,请参考以下文章

Python自动化开发从浅入深-进阶(进程)

Python自动化开发从浅入深-语言基础(collection)

Python自动化开发从浅入深-语言基础(常用模块)

Python自动化开发从浅入深-语言基础(set)

Python自动化开发从浅入深-语言基础(正则表达式)

老Python带你从浅入深探究Tuple