首页 > 代码库 > 网页设计之jQuery

网页设计之jQuery

2024-08-23 19:29:06   219人阅读

1.在html中引入css和jQuery

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css文件"> #引入css文件
</head>
<body>
    <script src="jquery-1.12.4.js"></script>#引入jQuery文件，src为路径

</body>
</html>
View Code

2.jQuery对象与DOM对象互相转化

　　将jQuery转化为DOM： $("#i1")[0] = dom

　　将DOM转化为jQuery： $(dom) = jQuery    

　　　　　　　　　　　　　$(dom)=jquery

　　　　　　　　　　　　　　　　　　　　【$(‘<div id=‘i1‘>123</div>‘) = [div#i1]或

                                                               d=‘<div id=‘i1‘>123</div>‘

                                                                $(d) = [div#i1]】

3.jQuery查找元素，选择器

  • id

　　　　<div id=‘i1‘>ww</div>

　　　　$(‘#i1‘)

  • class

　　　　<div class=‘c1‘>123</div>

　　　　$(‘.c1‘)

  • 标签

　　　　<div class=‘c1‘>

　　　　　　<a>f</a>

　　　　　　<a>f</a>

　　　　</div>

　　　　$(‘a‘)找到所有的a标签

  • 多选择器组合查找

　　　　$(‘#i1,.c1,a‘)　　

  • 层级选择器

　　  $(‘#i1 a‘)　　找div id=‘i1’内的所有a标签，包括子子孙孙

　　  $(‘#i1 > a‘)  只找div id=‘i1‘内的所有子a标签，不包括孙a标签，所谓的孙a标签就是子div下的a标签

　　  $(‘#i1 + a‘)   找div i1的下一个a标签，此a标签跟i1是同一级的

        $(‘#i1 ~ a‘)  找div i1下边的所有兄弟标签，i1上边的就不找，此a标签跟i1是同一级的

　　  $(‘#i1 a:first‘) 找div id=‘i1‘内的第一个a标签 【还有last找最后一个】

　　  $(‘#i1 a:eq(0)‘) 找div id=‘i1‘内的所有a标签的第0个a标签【eq是等于的意思，0是索引，还有lt小于，gt大于  】

        $(‘#i1‘).text()  获取div id=‘i1‘内的内容

　　  $(‘#i1‘).next()  找div id=‘i1‘的下一个兄弟标签

　　  $(‘#i1‘).prev()  找div id=‘i1‘的上一个兄弟标签　

　　  $(‘#i1‘).parent()  找div id=‘i1‘的父标签

　　  $(‘#i1‘).children()  找div id=‘i1‘的所有孩子标签

　　  $(‘#i1‘).siblings()  找div id = ‘i1‘的所有兄弟标签

　　  $(‘#i1‘).find(‘.c1‘)  找div id=‘i1‘内的所有class为‘c1’的标签

　　  $(‘#i1‘).addClass(‘.c1‘)  找到div id=‘i1‘并给该div添加class ‘.c1‘

　　  $(‘#i1‘).removeClass(‘.c1‘)  找到div id=‘i1‘并给该div去掉class ‘.c1‘

  • 属性选择器　　

　　  $(‘[alex]‘) 找所有属性为alex的标签。【<a alex=‘123‘></a> <p alex=‘456‘></p>,会找到这两个属性为alex的a、p标签】

　　  $(‘[alex="123"]‘)  找属性为alex="123"的标签，注意引号的不同

        $(‘:disabled‘)  找到所有不可编辑的标签【<input type=‘text‘ disabled />,disabled表示该输入框不可输入内容，enabled表示可以输入内容】

4.实现全选反选取消框


$(‘#tb:checkbox‘).prop(‘checked‘);         获取值
$(‘#tb:checkbox‘).prop(‘checked‘, true); 设置值
-
jQuery方法内置循环： 
- $(‘#tb:checkbox‘).each(function(){
       // this，在DOM中指代当前循环的元素
})
- var v = 条件 ? 真值 : 假值

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="checkAll()" />
    <input type="button" value="反选" onclick="reverseAll()" />
    <input type="button" value="取消" onclick="cancle()" />

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>选项</th>
                <th>选项</th>
            </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>2.2.2.2</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $(‘#tb :checkbox‘).prop(‘checked‘,true);
        }
    </script>
    
    <script>
        function reverseAll() {
            $(‘#tb :checkbox‘).each(function () {
                //each()函数会循环遍历jQuery找到的所有标签，并给这些标签执行某函数
                //this指代当前正在循环的标签（是DOM对象）
                /* dom实现方式
                if(this.checked){  //表示如果this.checked为true，不要写成this.checked = true
                    this.checked = false;
                }else {
                    this.checked = true;
                }
                */
                /*jQuery实现方式*/
                if($(this).prop(‘checked‘)){  //若果checkbox被选中，则$(this).prop(‘checked‘)返回true
                    $(this).prop(‘checked‘,false);
                }else {
                    $(this).prop(‘checked‘,true);
                }
            })
        }
    </script>
    
    <script>
        function cancle() {
            $(‘#tb :checkbox‘).prop(‘checked‘,false);
        }
    </script>

</body>
</html>
View Code

5.jQuery支持链式编程

  菜单栏显示

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: black;
            color: wheat;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width: 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div id="i1" 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="jquery-1.12.4.js"></script>
    <script>
        $(‘.header‘).click(function(){
            //jQuery支持链式编程，可以一直点下去
            $(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘)
        })
    </script>
</body>
</html>
View Code

 

网页设计之jQuery


联系
我们