zoukankan html css js c++ java

人生苦短，我用python-- Day17 jQuery讲解

jQuery介绍：

　　1.版本介绍：在官网下载jQuery会下载到1.x、2.x、3.x这三个系列，银角大王说1.x系列兼容性好，功能也能满足。

　　2.格式介绍：在官网不管下载那个系列的，都会看到有两种格式，a.jquery-1.12.4.js b.jquery-3.1.1.min.js;第二中是压缩格式，如果是编写代码阶段使用第一个方便我们自己好看，如果是项目上线阶段，建议换成第二个，节省空间；

1.html中如何引用jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">
        123
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 这里可以引用jQuery方法
        // 要是用jQuery方法,需要使用jQuery当做关键字进行调用jQuery方法;也可以使用一个$来代替jQuery；下面是来获取id等于i1的标签

        jQuery('#i1')
        
    </script>
</body>
</html>

2.jQuery获取的结果和Document获取的结果比较

　　a.jQuery中获取结果更多，我们暂且可以理解为获取的为一个数组，而domcument获取的结果是一个字符串，看例子：

　　b.这两种的转换

　　　　jQuery---->document:jQuery的结果[0]就可以了，上图可见

　　　　document---->jQuery：把结果放到$()中就可以了

3.选择器

　　a.id选择器

　　　　　$("#id")或jQuery("#id")

　　b.class选择器

　　　　$(".c1") 选择class等于c1的标签

　　c.标签选择器

<div class = 'c1'>
 <a>f1</a>
 <a>f2</a>
</div>
<div class='c1'>
　<a>f3</a>
</div>
<div class='c1'></div>

　　　　$('a') 选择所有a标签

　　d.标签组合选择器　　　　

<div id = "i10"class = 'c1'>
 <a>f1</a>
 <a>f2</a>
</div>
<div class='c1'>
　<a>f3</a>
</div>
<div class='c1'></div>

　　　　$('a,.c2,#i10')选a标签和class等于c2和id等于10的标签

　　e.层级选择器

　　　　层级筛选一，$('#i1') 找到id等于11的标签---->$('#i11 a')找到id等于11的标签下面所有的a标签（子子孙孙）

　　　　层级筛选二，$('#i1') 找到id等于11的标签---->$('#i11>a')找到id等于11的标签下面所有的a标签（儿子层级的a标签，不在往深处找）

　　f:基本选择器

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

$('li'); 找到所有的li标签---->$('li:first')找所有的li标签中的第一个

　　　$('li'); 找到所有的li标签---->$('li:last')找所有的li标签中的最后一个

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

　　$("tr")；找到所有的tr标签--->$("tr:eq(1)")；再找的所有的tr标签中获取索引为1的tr标签；注意这里的索引是从0开始的看一下图

　　g:属性选择器

　　h:表单对象属性

　　　　　补充一下input标签中disabled的属性的用法，当一个input标签加上一个disabled属性的时候，表明这个输入框无法输入数据，看代码：

<input type="text" disabled>

那么问题来了，如果我们想找某个页面中那些input标签是有disabled这个属性的怎么办呢？

$("input:disabled")

实验案例1：全选反选取消按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="Allchoose" type="button" value="全选"/>
    <input id="AllReverse" type="button" value="反选"/>
    <input id="AllRemove" type="button" value="取消"/>
    <table border="1px">
        <thead>
            <tr>
                <td>选择</td>
                <td>IP</td>
                <td>PORT</td>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="style/jquery-1.12.4.js"></script>
    <script>
        //全选按钮事件
        var choose = document.getElementById('Allchoose');
        choose.onclick = function () {
            $('#tb :checkbox').prop('checked', true);
        };
        //取消按钮事件
        var remove = document.getElementById('AllRemove');
        remove.onclick = function () {
            $('#tb :checkbox').prop('checked', false);
        };
        //反选按钮事件
        var Reverse = document.getElementById('AllReverse');
        Reverse.onclick = function () {
//           第一种方式dom实现
//           $('#tb :checkbox').each(function () {
//                if (this.checked){
//                    this.checked = false;
//                }else {
//                    this.checked = true;
//                }
//            })
//         第二种方式jQuery实现
//            $('#tb :checkbox').each(function () {
//                if($(this).prop('checked')){
//                    $(this).prop('checked',false);
//                }else {
//                    $(this).prop('checked',true);
//                }
//            })
//
//        第三种方式jQuery+三元运算实现  var v = 条件？真：假  如果条件为真v等于真，条件为假v等于假
              $('#tb :checkbox').each(function () {
                    var v = $(this).prop('checked')?false:true;
                    $(this).prop('checked',v);
              })
        }

    </script>
</body>
</html>

筛选器：

.next() 下一个

$('#i1').nextAll() 对象标签的下面所有标签（同级的）

$('#i1').nextUntil('#ii1') 对象标签的下一个到后面指定标签之间的标签（左闭右开）

.prev() 上一个

$('#i1').prevAll() 对象标签的上面所有标签（同级的）

$('#i1').prevUntil('#ii1') 对象标签的上一个到后面指定标签之间的标签（左闭右开）

.parent() 父亲

$('#i1').parents() 对象标签的所有父亲标签（逐级往上找，直到找到html标签）

$('#i1').parentsUntil() 对象标签的所有父亲标签到指定的until标签为止

.chileren() 所有的孩子

.siblings() 所有的兄弟

.find('#i1') 子子孙孙中找id等于i1的标签

删选器过滤：

　　eq()等于某个索引

　　first()第一个

　　last()最后一个

　　hasClass(class) 是否有这个类

实验案例二：后台管理左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .header{
        background-color: black;
        color: white;
    }
    .content{
        min-height: 50px;
    }
    .hide{
        display: none;
    }
</style>
</head>
<body>
    <div style=" 300px;height: 400px;border: 1px solid red">
        <div class="item">
            <div class="header">标题一</div>
            <div class="content hide">内容一</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容二</div>
        </div>
        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容三</div>
        </div>
    </div>
    <script src="style/jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function () {
            $(this).next().removeClass('hide');
            $(this).parent().siblings().find('.content').addClass('hide');
        })

    </script>
</body>
</html>

属性操作：

　　attr方法，自定义属性

$(..).attr('n') 获取属性n对应的值

$(..).attr('n','v') 给属性n赋值为v，如果属性n有值那么覆盖n现有的值

$(..).removeAttr('n') 删除属性n对应的值

prop 属性

# 专门用于chekbox的状态设置与选择
$(..).prop('checked') 获取当前chebox是否被选中，true or false
$(..).prop('checked', true) 设置chebox

设置状态时候 false和true不要用引号引起来，测试发现如果用false引号引起来的话不生效，true引起来生效

样式操作

　　addClass 增加一个类

　　removeClass 删除一个类

　　toggleClass 如果这个标签有这个类就删除，如果没有就增加

实验案例：开灯关灯案例

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

        .c2{
            opacity:0.5;
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity:0.5;
            z-index: 9;
        }
        .held{
            display: none;
        }
        .c1{
            z-index: 10;
            position: fixed;
        }
    </style>
</head>
<body>
    <div>
        <input class="c1" type="button" value="开关按钮">
    </div>
    <div class="c2 held">

    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.c1').click(function () {
            $('.c2').toggleClass('held')
        });

    </script>
</body>
</html>

文本操作：

　　$(..).text() 获取文本内容

　　$(..).text('<a>1</a>') 设置标签的value内容以字符串的方式设置

　　$(..).html() 获取标签的内容，以html的形式获取

　　$(..).html('<a>1</a>') 设置标签的value内容，以html的形式设置

　　$(..).val() 获取值

　　$(..).val('测试一下')

val方法讲解

实验案例：模态对话框案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .modle{
        position: fixed;
        top: 50%;
        left: 50%;
        width: 500px;
        height: 400px;
        margin-top: -250px;
        margin-left: -250px;
        border: 1px solid red;
        background-color: #eeeeee;
        z-index: 10;

    }
    .back{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: black;
        opacity: 0.6;
        z-index: 9;
    }
        .held{
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" value="添加" onclick="ADD()">
    <table border="1">
        <tr>
            <td>IP</td>
            <td>端口</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>192.168.1.1</td>
            <td>80</td>
            <td><a class="edit">编辑</a>|删除</td>
        </tr>
        <tr>
            <td>192.168.1.2</td>
            <td>3306</td>
            <td><a class="edit">编辑</a>|删除</td>
        </tr>
        <tr>
            <td>192.168.1.3</td>
            <td>22</td>
            <td><a class="edit">编辑</a>|删除</td>
        </tr>
    </table>
    <div class="modle held" >
        Server:<input name="servername" type="text"><br>
        Port:<input name="port" type="text"><br>
        <div>
           <input type="button" value="取消" onclick="cancel()">
        </div>


    </div>
    <div class="back held"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ADD() {
            $('.modle,.back').removeClass('held');
        }
        function cancel() {
            $('.modle,.back').addClass('held');
        }
        $('.edit').click(function () {
            $('.modle,.back').removeClass('held');
            var tds = $(this).parent().prevAll();
            var port = tds[0].innerText;
            var server = tds[1].innerText;
            $('.modle input[name="servername"]').val(server);
            $('.modle input[name="port"]').val(port);
        })
    </script>
</body>
</html>

查看全文

相关阅读:
Linux下忘记MySQL密码的解决办法
 Jenkins——为什么使用持续集成？
JBoss7部署EJB连接MySQL
同一进程中的线程有哪些资源可以共享(转)
基于ssh开发web项目-用户登录流程
 mysql-5.6.16安装流程
 Spring学习笔记
 Hibernate持久化对象状态、转换方法和操作步骤
 Hibernate配置文件与关联映射介绍
 Java的hashCode方法

原文地址：https://www.cnblogs.com/xinzhiyu/p/6120124.html