python web jQuery day16

时间：2016-08-23 18:51:05 阅读：257 评论：0 收藏：0 [点我收藏+]

标签：

内容概述：

DOM
    查找：直接查找
          间接查找（节点：包含元素和节点，元素：只包含元素）
          --getElementById
          --getElementsByTagName
    操作：
        值
            innerText
            innerHtml
            value
        class:
            className
            classList.add
            classList.remove
        样式：
            <input type=‘text‘ style=‘color:red;font-size:40px‘ />
            tag = ...
            tag.style.color = ‘red‘;
            tag.style.fontSize = ‘40px‘;
        属性：
            <input id=‘i1‘ name=‘n1‘ alex=‘sb‘ type=‘text‘ style="color:red;font-size:40px;"/>
            setAttribute
            getAttribute
            removeAttribute
            
            ===>
                tabObj.checked = true
            ===>jQuery: 操作数据，prop(checked,true)
        
        标签：
            创建标签：
                字符串
                对象
            将标签添加到HTML中
                字符串形式的标签：
                    p1.insertAdjacentHTML(‘beforeEnd‘,tag);
                对象形式的标签：
                    p1.insertAdjacentElement(‘afterBegin‘,document.createElement(‘p‘))
                    xxx.insertBefore(tag,xxx[1])
        点赞：
            创建标签，定时器（大小，位置，透明度）
            1、this，当前触发事件的标签
            2、createElement
            3、appendChild
            4、setInterval创建定时器
               clearInterval删除定时器
            5、removeChild删除子标签
            
        定时器
            setTimeOut,clearTimeout
            setInterval,clearInter
            
        事件：
            1、this,当前出发事件的标签
            2、全局事件绑定   window.onKeyDown = function(){}
            3、event,包含事件相关内容
            4、默认事件
                自定义优先：a,form
                默认优先：checkbox
JQuery
    模块，Dom和JavaScrip,推荐使用1.12，或1.x的版本，2.x不支持IE9
    
    查找：
        选择器
            id
            标签
            类
            组合(#i1,#i2,#i3)
            层级#i1 .c1 (所有子孙里找)
            $(‘input:eq=(1),#i1 .item‘)
            
        筛选器
            $(‘#i1‘).find(‘.item‘)
            $(‘#i1‘).eq(1)
    操作：
        CSS
        属性 *****非常重要
            $(‘#i1‘).html() # 获取html内容
            $(‘#i1‘).html("<span>123</span>") # 设置html内容
            
            text()
            
            val()
        文本操作
    事件：
        -优化
        1、如何使用jQuery绑定
        2、当文档加载完毕后，自动执行
            $(function(){
            ......
            })
        3、延迟绑定
        4、return false;

内容概要

<!--http://www.cnblogs.com/wupeiqi/p/5643298.html-->

DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
    查找：直接查找
          间接查找（节点：包含元素和节点，元素：只包含元素）
          --getElementById
          --getElementsByTagName

查找元素

直接查找

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

操作

1、内容

innerText   文本
outerText
innerHTML   HTML内容
innerHTML  
value       值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text" id="i1"/>
    <a id="i2" href="http://www.baidu.com">百<span>666</span>度</a>
</body>
</html>


#console
t = document.getElementById(‘i2‘)
<a id=?"i2" href=?"http:?/?/?www.baidu.com">?…?</a>?
t.innerText    //只显示文本
"百666度"
t.innerHTML    //显示文本家标签
"百<span>666</span>度"

例子

2、属性

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById(‘n1‘).setAttributeNode(atr);
*/

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div id="p1">
        <p>hhh</p>
    </div>

    <input type="button" value="全选" onclick="CheckAll()" />
    <input type="button" value="取消" onclick="CancleAll()"/>
    <input type="button" value="反选" onclick="ReverseAll()"/>

    <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
             <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function CheckAll(){
            /*
            var tb = document.getElementById(‘tb‘);
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.setAttribute(‘checked‘,‘checked‘);
            }
            */
            $(‘#tb input[type="checkbox"]‘).prop(‘checked‘,true);
        }
        function CancleAll(){
            /*
            var tb = document.getElementById(‘tb‘);
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.removeAttribute(‘checked‘);
            }
            */
            $(‘#tb input[type="checkbox"]‘).prop(‘checked‘,false);
        }
        function ReverseAll(){
            /*
            var tb = document.getElementById(‘tb‘);
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                if(ck.checked){
                    ck.checked = false;
                    ck.removeAttribute(‘checked‘);
                }else{
                    ck.checked = true;
                    ck.setAttribute(‘checked‘, ‘checked‘);
                }
            }
            */
            $(‘#tb input[type="checkbox"]‘).each(function(i){
                // this  当前标签
                // $(this)当前标签的jQuery对象
                if($(this).prop(‘checked‘)){
                    $(this).prop(‘checked‘, false);
                }else{
                    $(this).prop(‘checked‘, true);
                }
            });
        }
    </script>
</body>
</html>

全选取消反选

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>             <!--绑定事件,onfocus是获取焦点，onblur是失去焦点，当鼠标点到input框时就会执行该函数-->
    <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/>

    <script type="text/javascript">
        function  Focus() {
            //console.log(123);
            //获取标签，清空
            var tag = document.getElementById(‘i1‘);
            if(tag.value == "请输入关键字"){
                tag.value = "";
            }
        }

        function Blur(){
            //console.log(‘blur‘);
            var tag = document.getElementById(‘i1‘);
            var val = tag.value;
            if(val.trim().length == 0){
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>

搜索框

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none !important;
          }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            /*background-color: black;*/
            /*opacity:0.6;*/
            /*代替上面两个*/
            background-color: rgba(0,0,0,.6);
            z-index: 1000;
        }
        .modal{
            /*让这个div居中层次在最外面*/
            height: 200px;
            width:400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 1001;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;background-color: #dddddd;">
                                              <!--绑定点击事件  -->
        <input type="button" value="点我" onclick="ShowModal();"/>
    </div>
    <div id="shade" class="shade hide"></div>
    <div id="modal" class="modal hide">
        <!--让a标签什么都不做设置成void-->
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>
    <script>
        function  ShowModal() {
            var t1 = document.getElementById(‘shade‘);
            var t2 = document.getElementById(‘modal‘);
            t1.classList.remove(‘hide‘);
            t2.classList.remove(‘hide‘);
        }
        function HideModal() {
            var t1 = document.getElementById(‘shade‘);
            var t2 = document.getElementById(‘modal‘);
            t1.classList.add(‘hide‘);
            t2.classList.add(‘hide‘);
        }
    </script>
</body>
</html>

模态对话框

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .item{
            padding: 50px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="item">
        <a onclick="Favor(this);">赞1</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞2</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞3</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞4</a>
    </div>
    <script>
        function Favor(ths) {
            //ths形参相当于this,当前出发事件的标签
            var top = 49;
            var left = 71;
            var op = 1;
            var fontSize = 18;

            var tag = document.createElement(‘span‘);
            tag.innerText = ‘+1‘;
            tag.style.position = ‘absolute‘;
            tag.style.top = top + ‘px‘;
            tag.style.left =left + "px";
            tag.style.opacity = op;
            tag.style.fontSize = fontSize +"px";
            ths.parentElement.appendChild(tag);

            var interval = setInterval(function () {
                top -= 10;
                left += 10;
                fontSize += 5;
                op -= 0.1;

                tag.style.top = top + "px";
                tag.style.left = left + "px";
                tag.style.opacity = op;
                tag.style.fontSize = fontSize + "px";
                if(op <= 0.2){
                    clearInterval(interval);
                    ths.parentElement.removeChild(tag);
                }
            }, 50);
        }
    </script>
</body>
</html>

3、class操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

4、标签操作

a.创建标签

// 方式一
var tag = document.createElement(‘a‘)
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
 
// 方式二
var tag = "<a class=‘c1‘ href=‘http://www.cnblogs.com/wupeiqi‘>wupeiqi</a>"

b.操作标签

// 方式一
var obj = "<input type=‘text‘ />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement(‘afterBegin‘,document.createElement(‘p‘))
 
//注意：第一个参数只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘
 
// 方式二
var tag = document.createElement(‘a‘)
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

5、样式操作

var obj = document.getElementById(‘i1‘)
 
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

python web jQuery day16

标签：

原文地址：http://www.cnblogs.com/QL8533/p/5800345.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行