zoukankan html css js c++ java

python_way day16 JQuary

python_way day16 JQuery

封装dom js代码

jQuery(1.10,1.12-兼容性好，2.0。以后放弃了ie9以下)

　　　　- 封装了Dom & JavaScript

查找：

　　1.选择器：直接找到弄一个或者某些标签

　　2.筛选器：找到标签进行筛选

操作：

　　css

属性

　　文本操作

定义事件：

　　找到标签，绑定事件。

一、查找

1，筛选器

#id 地选择器

标签选择器

class选择器

* 所有

组合选择器：#i1,#i2,#i3

层级选择器：#i1 .c1 到i1标签的子子孙孙里找

parent >child：到孩子的层级找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div class="item">
            <a>百度</a>
        </div>
        <div class="item">
            <div id="i1"></div>
        </div>
        <div class="item"></div>
    </div>
    <script src="js/jquery-3.1.0.js"></script>
</body>
</html>

JavaScript 代码：

$(".item")　　　　　　　　　　//class选择器
[<div class="item">…</div>, <div class="item"></div>, <div class="item"></div>]
$(".item a")　　　　　　　　 //层级选择器
[<a>百度</a>]
$(".item a").addClass('hide')　　　　　　
[<a class="hide">百度</a>]
$(".item a").removeClass('hide')
[<a class>百度</a>]
$("div")　　　　　　　　　　　　//标签选择器
[<div>…</div>, <div class="item">…</div>, <div class="item"></div>, <div class="item"></div>]
$("#i1")　　　　　　　　　　　　//id选择器
[<div id="i1"></div>]
$("a,#i1")　　　　　　　　　　 //组合选择器
[<a>百度</a>, <div id="i1"></div>]

$(".item:first")　　　　　　　　　　//找众多的item中的第一个标签
[<div class="item">…</div>]
:not(selector)不是的
:even 奇数
:odd 偶数
:eq(index)索引位置
:gt(index)大于
:it(index)小于

属性，子元素，表单，

<div class="item">
     <input type="text" disabled>   //这个text的input变成disabled不可写的
 </div>

表单选择器：

$(":text")[0]
<input type="text" disabled>
inp = $(":text")[0]

$("div")
[<div>…</div>, <div class="item">…</div>, <div class="item">…</div>, <div id="i1"></div>, <div class="item">…</div>]
$("div:eq(1)")　　　　　　　　　　//索引
[<div class="item">…</div>]

二、筛选器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div class="item">
            <a>百度</a>
        </div>
        <div class="item">
            <div id="i1"></div>
        </div>
        <div class="item">
            <span class="item"></span>
            <input type="text" disabled>
        </div>
    </div>
    <script src="js/jquery-3.1.0.js"></script>
</body>
</html>

JavaScript 代码

　过滤　

$('div').eq(1)
[<div class="item">…</div>]

$('div').first()
[<div>…</div>]

$('div').last()
[<div class="item">…</div>]

$(".item").is("div")　　　　　　//做判断使用
true

　查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
    <dd>definition 2-a</dd>
    <div>asdf</div>
    <dd>definition 2-b</dd>
    <dd>definition 2-c</dd>



  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>
    <script src="js/jquery-3.1.0.js"></script>
</body>
</html>

JavaScript 代码

nextUntil([e|e][,f])  直到找到谁停止

$('#term-2').nextUntil('div')    //找到id=term-2的标签的儿子所有标签，筛选查找，直到找到div标签停止
[<dd>definition 2-a</dd>]

实例1，隐藏侧边菜单栏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 600px;
             200px;
            border: 1px solid rebeccapurple;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: blue;
            color: white;
            padding: 0 auto;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item" >
            <div class="title" onclick="ShowItem(this)">菜单一</div> <!--把自己传给函数-->
            <div class="body hide">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>
        </div>
        <div class="item" >
            <div class="title" onclick="ShowItem(this)">菜单二</div>
                <div class="body hide">
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                </div>
        </div>
        <div class="item" >
            <div class="title" onclick="ShowItem(this)">菜单三</div>
                <div class="body hide">
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                </div>
        </div>
    </div>
    <script src="js/jquery-3.1.0.js"></script>
    <script>
        function ShowItem(self) {
            var ck = $(self).next();        //找自己的里面的所有标签
            ck.removeClass("hide");         //找到后移除隐藏
            var br = $(self).parent().siblings();   //然后在找自己的父亲的兄弟
            var ot_body = br.find(".body");         //从这些兄弟里面找class为body的子标签
//            console.log(ot_body)            [div.body.hide, div.body.hide, prevObject: jQuery.fn.init[2]]
            for(i=0;i<ot_body.length;i++){          //上面找到的不只是div，还有一个对象，所以不找这个对象急用<号
                ot_div = ot_body[i];
                var class_name = ot_div.className;   //找出这个标签的class名字
                if (class_name.indexOf("h") !== -1){    //判断这个class中有没有h这个字符串，没有就是没有hide这个css
                    ot_body.addClass("hide")            //把hide加上
                }
            }
        }
    </script>
</body>
</html>

三、属性操作

属性：　

attr(name|pro|key,val|fn)     //给一个标签设置一个属性
removeAttr(name）             //移除一个属性
prop(n|p|k,v|f)　　　　　　　　 //处理选中和取消

实例二：jQuery版本的反选取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选，反选，取消</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1</td>
                <td>11</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>2</td>
                <td>22</td>
            </tr>
             <tr>
                <td><input type="checkbox"></td>
                <td>3</td>
                <td>33</td>
            </tr>
        </tbody>
    </table>
    <hr/>
    <input type="button" value="全选" onclick="CheckAll()">
    <input type="button" value="反选" onclick="turnchose()">
    <input type="button" value="取消" onclick="CancleALL()">
    <script src="js/jquery-3.1.0.js"></script>
    <script>
        function CheckAll() {
            $('#tb :checkbox').prop("checked",true);
        }
        function CancleALL() {
           $('#tb :checkbox').prop("checked",false);
        }
         function turnchose() {
            $('#tb :checkbox').each(function(i) {       //加上i就是把当前索引个数拿到
                //this  当前循环的每一个标签元素
                //$(this) 当前jQ标签
//                console.log(i);                       打印可以查看到当前的索引
                if($(this).prop("checked")){            //prop只有一个参数就是查看这个标签有的checked是否为真
                    $(this).prop("checked",false)       //真就改成false
                }else{
                    $(this).prop("checked",true)        //false就改成true
                }
            });
        }
    </script>
</body>
</html>

Class

addClass(class|fn)      　　　　//加上一个样式
removeClass([class|fn])　　　　 //删除一个样式
toggleClass(class|fn[,sw])     //样式开关，点一下加上，再点一下移除

HTML代码/文本/值　

html([val|fn])
text([val|fn])
val([val|fn|arr])

$('#i1').html()  //获取html内容

$('#i1').html("<span>123</span>")  //设置html内容

$('#i1').text()  //获取text文本

$('#i1').text("123")  //设置text内容

val也是一样的

四、CSS

css

css(name|pro|[,val|fn])1.9*
jQuery.cssHooks

例子：　

tag.style.fontSize = 18px;   　　　　　 //dom中设置字体的大小
$("#i1").css('fontSize',"18px")　　　　 //jQ中设置字体大小(一个参数就是获取)

位置：

offset([coordinates])
position()
scrollTop([val])
scrollLeft([val])

offset：是当前标签距离阅览器的初始顶部的高度，无论你如何滚动滑轮，这个大小都是不变的。

position：离其父标签的距离（不是相对position的位置，就是他上一层父亲的位置）

scrollTop：

tag.scrollTop=0       //dom中设置字体的大小

$(#i1).scrollTop(0)   //jQ中设置字体的大小（没有参数为获取，有参数就是设置）

尺寸：

height([val|fn])　　　　　　　　　　//自己的高度
width([val|fn])　　　　　　　　　　 //自己的宽度
innerHeight()　　　　　　　　　　　　//内边框
innerWidth()
outerHeight([soptions])　　　　　　 //外边框 默认包括补白和边框
outerWidth([options])

五、文档处理　　

内部插入
append(content|fn)   //div.append(a)   往div中加一个a标签
appendTo(content)　　 //a.appendTo(div) 把a加到div里面
prepend(content|fn)
prependTo(content)

外部插入
after(content|fn)
before(content|fn)
insertAfter(content)　　　　　　#和after一样但是是颠倒回来和上面的appendTo一样
insertBefore(content)

删除
empty()　　　　　　　　//dev.empty("a")，把div内部的a标签清空
remove([expr])　　　 //把标签整体删除
detach([exr])　　　　

复制
clone([Even[,deepEven]])

实例三：增加输入框和删除输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签克隆</title>
</head>
<body>
    <div>
        <p>
            <a onclick="Add(this)"> + </a>
            <input type="text"/>
        </p>
    </div>
    <script src="js/jquery-3.1.0.js"></script>
    <script>
        function Add(ths) {
            var p =$(ths).parent().clone();
            p.find("a").text("-");   　　　　　　　　　　　　//把a标签的文本变为-号
            p.find("a").attr("onclick","Del(this)");    //因为新生成的点上-号就要删除他，所以要把新生成的onclick属性赋值成Del新的函数
            var par = $(ths).parent().parent();  　　　　//找到这个a标签的父亲的父亲就是div标签，因为我们新加的p要保证在最下面，不能在两个p标签中间插入
            par.append(p)//将p标签追加到最下面
        }
        function Del(ths) { 　　　　　　  //这就是删除p标签的函数
             $(ths).parent().remove()   //找到a标签的父亲（p标签），然后删除
        }
    </script>
</body>
</html>

六：事件　

1、如何使用jQ绑定事件

2、当文档加载完毕后自动执行

3、延迟绑定

如何使用jQ绑定事件

方式一：$(js).click(function(){...}) $(把谁).使用什么事件绑定（出发事件使用什么方法）

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 600px;
             200px;
            border: 1px solid rebeccapurple;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: blue;
            color: white;
            padding: 0 auto;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item" >
            <div class="title">菜单一</div> <!--把自己传给函数-->
            <div class="body hide">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>
        </div>
        <div class="item" >
            <div class="title">菜单二</div>
                <div class="body hide">
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                </div>
        </div>
        <div class="item" >
            <div class="title">菜单三</div>
                <div class="body hide">
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                </div>
        </div>
    </div>
    <script src="js/jquery-3.1.0.js"></script>
    <script>
        $(".item .title").click(function () {　　　　//找到item下的title，将这些title使用关键字click（dom中的onclick是一样的）来绑定，中间是一个自执行函数
                var ck = $(this).next();        //找自己的里面的所有标签  （this就是代指的当前绑定事件的title）
                ck.removeClass("hide");         //找到后移除隐藏
                var br = $(this).parent().siblings();   //然后在找自己的父亲的兄弟
                var ot_body = br.find(".body");         //从这些兄弟里面找class为body的子标签
    //            console.log(ot_body)            [div.body.hide, div.body.hide, prevObject: jQuery.fn.init[2]]
                for(i=0;i<ot_body.length;i++){          //上面找到的不只是div，还有一个对象，所以不找这个对象急用<号
                    ot_div = ot_body[i];
                    var class_name = ot_div.className;   //找出这个标签的class名字
                    if (class_name.indexOf("h") !== -1){    //判断这个class中有没有h这个字符串，没有就是没有hide这个css
                        ot_body.addClass("hide");            //把hide加上
                    }
                }
        })
    </script>
</body>
</html>

方式二：$(js).bind('click',function(){...}) $(把谁).绑定(使用什么事件绑定,触发事件使用什么方法)

$(".item .title").bind('click',function () {　　　　//找到item下的title，将这些title使用关键字click（dom中的onclick是一样的）来绑定，中间是一个自执行函数
                var ck = $(this).next();        //找自己的里面的所有标签  （this就是代指的当前绑定事件的title）
                ck.removeClass("hide");         //找到后移除隐藏
                var br = $(this).parent().siblings();   //然后在找自己的父亲的兄弟
                var ot_body = br.find(".body");         //从这些兄弟里面找class为body的子标签
    //            console.log(ot_body)            [div.body.hide, div.body.hide, prevObject: jQuery.fn.init[2]]
                for(i=0;i<ot_body.length;i++){          //上面找到的不只是div，还有一个对象，所以不找这个对象急用<号
                    ot_div = ot_body[i];
                    var class_name = ot_div.className;   //找出这个标签的class名字
                    if (class_name.indexOf("h") !== -1){    //判断这个class中有没有h这个字符串，没有就是没有hide这个css
                        ot_body.addClass("hide");            //把hide加上
                    }
                }
        })

当文档加载完毕后自动执行

我们的html整个页面执行顺序是自上而下的，如果我们有很多很大的图片需要加载，这个页面就会加载的很慢，所以可以不需要这些大文件加载完，就能执行页面的一个功能

　　<script src="js/jquery-3.1.0.js"></script>
    <script>
        $(function () {
            //当文档树加载完毕后，自动执行。比如内容没有，但是位置匡已经有了
            $(".item .title").click(function () {
                var ck = $(this).next();        //找自己的里面的所有标签  this就是代指的当前绑定事件的title
                ck.removeClass("hide");         //找到后移除隐藏
                var br = $(this).parent().siblings();   //然后在找自己的父亲的兄弟
                var ot_body = br.find(".body");         //从这些兄弟里面找class为body的子标签
    //            console.log(ot_body)            [div.body.hide, div.body.hide, prevObject: jQuery.fn.init[2]]
                for(i=0;i<ot_body.length;i++){          //上面找到的不只是div，还有一个对象，所以不找这个对象急用<号
                    ot_div = ot_body[i];
                    var class_name = ot_div.className;   //找出这个标签的class名字
                    if (class_name.indexOf("h") !== -1){    //判断这个class中有没有h这个字符串，没有就是没有hide这个css
                        ot_body.addClass("hide");            //把hide加上
                    }
                }
            })
        })
        
    </script>

延迟绑定

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延迟绑定</title>
</head>
<body>
    <input type="button" style=" 100px;height: 20px" value="增加" onclick="Add()">
    <ul>
        <li>123</li>
        <li>234</li>
        <li>456</li>
        <li>678</li>
    </ul>
<script src="js/jquery-3.1.0.js"></script>
<script>
    $(function () { 
        //这里面的事件会在加载完页面后自定绑定上面已经存在的li
        $('ul li').click(function () {
            alert($(this).text())
        })
    });

    function Add() {
        //这里的add是在页面加载完，并且上面的绑定完成以后，我们点击按钮后才可增加到后面，所以虽然li增加了但是时间没有绑定
        var tag = document.createElement('li');
        tag.innerText='666';
        $("ul").append(tag);
    }
</script>
</body>
</html>

问题一

如何解决？如何让我们新添加的也可以绑定上事件！

这时就要使用delegate了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延迟绑定</title>
</head>
<body>
    <input type="button" style=" 100px;height: 20px" value="增加" onclick="Add()">
    <ul>
        <li>123</li>
        <li>234</li>
        <li>456</li>
        <li>678</li>
    </ul>
<script src="js/jquery-3.1.0.js"></script>
<script>
    $(function () {
        //这里面的事件会在加载完页面后自定绑定上面已经存在的li
//        $('ul li').click(function () {
//            alert($(this).text())
//        })
        
        //整个下面的delegate不会在页面加载完以后就执行，他的功能是在触发这个li的事件才会绑定click这个时间，所以这样写的话，下面的Add也就可以被这个事件所包含了
        $("ul").delegate("li","click",function(){   //去ul中找到li然后执行click事件
            alert($(this).text())       //实践中要做的事情
        });
    });

    function Add() {
        //这里的add是在页面加载完，并且上面的绑定完成以后，我们点击按钮后才可增加到后面，所以虽然li增加了但是时间没有绑定
        var tag = document.createElement('li');
        tag.innerText='666';
        $("ul").append(tag);
    }
</script>
</body>
</html>

dom，jQuery对象互换

$(dom) 转换为jQuery对象

$(dom)[0] 转为dom对象　　

删除
复制
- clone([Even[,deepEven

查看全文

相关阅读:
Linux_文件权限
 离殇
 Oracle数据库软件标准版的一个限制：仅仅能用一个rman channel
数据结构和算法设计专题之---推断两个链表是否相交并找出交点
 Test for Job (poj 3249 记忆化搜索)
表达式求值
 HDOJ 2196 Computer 树的直径
 ListView的position的保持
 Django訪问量和页面PV数统计
 【oracle 11G Grid 】Crsctl start cluster 和 crsctl start crs 有差别么？

原文地址：https://www.cnblogs.com/python-way/p/5808975.html