JQuery基础总结

最新推荐文章于 2021-09-09 15:37:52 发布

HansMa

最新推荐文章于 2021-09-09 15:37:52 发布

阅读量147

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/github_27314097/article/details/82390509

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

JQuery选择器

基本选择器（重点）

• #id：根据元素的id属性来获取元素
• .class：根据元素的class属性来获取元素
• Element：根据元素的名称来获取元素
• selector1,selector2：群组选择器，可以同时匹配多个元素

示例代码：

<script>
    //定义页面载入事件
    window.onload = function() {
        //获取btnok按钮
        document.getElementById('btnok').onclick = function() {
            //1、根据元素的id属性获取元素
            //$('#div2').html('测试');
            //2、根据元素的class属性获取元素
            //$('.div3').html('测试');
            //3、根据元素的名称来获取元素
            //$('div').html('测试');
            //4、使用群组选择器获取所有的div与p元素
            $('div,p').html('测试');
        }
    }
</script>
<body>
<input type="button" id='btnok' value='获取元素' />
<hr />
<p>p元素</p>
<div>div1元素</div>
<div id='div2'>div2元素</div>
<div class='div3'>div3元素</div>
</body>

层级选择器（重点）

同级兄弟关系，父子关系，祖先与后代元素关系
• ancetor（空格）descendant：选择当前元素的所有后代元素（不分层级）
• parent >child：选择父元素下的所有子元素（只有一级，要求是父子关系）
• prev + next：选择当前元素紧邻的同级元素的下一个元素
• prev ~ siblings：选择当前元素紧邻的所有同级兄弟元素

示例代码：

<script>
//定义页面载入事件
window.onload = function() {
//获取btnok按钮
document.getElementById('btnok').onclick = function() {
//1、获取div1元素下的所有后代元素p
//$('#div1 p').html('测试');
//2、获取div1元素下的所有子元素p
//$('#div1 > p').html('测试');
//3、获取与div1元素相邻的下一个同级兄弟节点
//$('#div1 + div').html('测试');
//4、获取div1元素下面的所有同级兄弟节点
$('#div1 ~ div').html('测试');
}
}
</script>
<body>
<input type='button' id='btnok' value='获取元素' />
<hr />
<div id='div1'>
<p>p1元素</p>
<div id='div2'>
<p>p2元素</p>
</div>
</div>
<div id='div3'>div3元素</div>
<div id='div4'>div4元素</div>
</body>

简单选择器

• :first ：选择索引为0第一个元素，索引默认是从0开始的
• :last ：选择索引最大的最后一个元素
• :even ：选择索引为偶数的所有元素
• :odd ：选择索引为奇数的所有元素
• :eq(index) ：根据元素的索引index来获取元素
• :gt(index) ：选择索引大于index的所有元素
• :lt(index) ：选择索引小于index的所有元素
• :not(selector)：选择除指定选择器以外的其他元素

示例代码：

<script>
    //定义页面载入事件
    window.onload = function() {
        //获取btnok按钮并绑定事件
        document.getElementById('btnok').onclick = function() {
            //1、获取索引为0的第一个元素
            //$('td:first').html('测试');
            //2、获取索引最大的最后一个元素
            //$('td:last').html('测试');
            //3、使用奇偶数来实现隔行变色
            //$('td:even').css('backgroundColor','red');
            //$('td:odd').css('backgroundColor','yellow');
            //4、根据元素的索引来获取元素
            //$('td:eq(5)').html('测试');
            //5、获取所有索引大于4的td元素
            //$('td:gt(4)').html('测试');
            //6、获取所有索引小于4的td元素
            //$('td:lt(4)').html('测试');
            //7、获取除指定选择器以外的其他元素
            $('td:not(td:eq(5))').html('测试');
        }
    }
</script>
<body>
<input type='button' id='btnok' value='获取元素' />
<hr />
<table width='600' border='1'>
    <tr>
        <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
    </tr>
</table>
</body>

内容选择器

• :contains(text)：匹配包含指定text文本的元素
• :empty：匹配内容为空的元素
• :has(selector) ：匹配具有指定选择器的元素
• :parent ：匹配具有子元素（子元素或文本）的元素，匹配内容不为空的元素

示例代码：

<script>
    //定义页面载入事件
    window.onload = function() {
        //获取btnok按钮并绑定相关事件
        document.getElementById('btnok').onclick = function() {
            //1、匹配内容包含西游的li标签
            //$('li:contains("西游")').html('测试');
            //2、匹配内容为空的li标签
            //$('li:empty').html('一个男人和一群女人的故事');
            //3、匹配具有指定选择器的元素
            //$('li:has(a)').html('一场打怪升级的游戏');
            //4、匹配内容不为空的元素
            $('li:parent').html('四大名著');
        }
    }
</script>
<body>
<input type='button' id='btnok' value='匹配元素' />
<hr />
<ul>
    <li>水浒传</li>
    <li></li>
    <li><a>西游记</a></li>
    <li>三国演义</li>
</ul>
</body>

可见性选择器

• :hidden：匹配所有隐藏元素（display:none）
• :visible：匹配所有可见元素

示例代码：

<script>
    //定义页面载入事件
    window.onload = function() {
        //获取btnok按钮
        document.getElementById('btnok').onclick = function() {
            //1、获取所有可见元素并隐藏
            //$('div:visible').hide();
            //2、获取所有隐藏元素并显示
            $('div:hidden').show();
        }
    }
</script>
</head>
<body>
<input type='button' id='btnok' value='获取元素' />
<hr />
<div id='result'></div>
</body>

属性选择器
• [attribute]：匹配具有指定选择器的元素
• [attribute=value]：匹配具有指定属性值value的元素
• [attribute!=value] ：匹配属性值不等于value的元素
• [attribute^=value] ：匹配属性值以value开始的元素
• [attribute$=value] ：匹配属性值以value结尾的元素
• [attribute*=value] ：匹配属性值包含value的元素
• [attribute1][ attribute2][ attributeN] ：匹配同时具有多个属性的元素

示例代码：

<script>
    //定义页面的载入事件
    window.onload = function() {
        //获取btnok按钮并绑定相关事件
        document.getElementById('btnok').onclick = function() {
            //1、获取具有color属性的元素
            //$('font[color]').html('测试');
            //2、获取size属性等于4的font元素
            //$('font[size=4]').html('测试');
            //3、获取size不等于5的font元素
            //$('font[size!=5]').html('测试');
            //4、获取属性值以#ff开头的元素
            //$('font[color^="#ff"]').html('测试');
            //5、获取属性值以f00结尾的元素
            //$('font[color$="f00"]').html('测试');
            //6、获取属性值包含ff的元素
            //$('font[color*="ff"]').html('测试');
            //7、获取同时具有多个属性值的元素
            $('font[size][color]').html('测试');
        }
    }
</script>
<body>
<input type='button' id='btnok' value='获取元素' />
<hr />
<font>font1元素</font>
<hr />
<font size='5'>font2元素</font>
<hr />
<font color='#ff0000'>font3元素</font>
<hr />
<font size='4' color='#00ff00'>font4元素</font>
</body>

子元素选择器

• :nth-child(index/even/odd) ：根据子素的索引获取元素，默认索引从1开始
• :first-child ：匹配第一个子元素
• :last-child ：匹配最后一个子元素
• :only-child ：如果一个子元素是唯一的子元素，则匹配

示例代码：

<script>
    //定义页面载入事件
    window.onload = function() {
        //获取btnok按钮并绑定相关事件
        document.getElementById('btnok').onclick = function() {
            //1、获取索引为1的子元素
            //$('li:nth-child(1)').html('测试');
            //2、获取第一个子元素
            //$('li:first-child').html('测试');
            //3、获取最后一个子元素
            //$('li:last-child').html('测试');
            //4、获取唯一的子元素
            $('li:only-child').html('测试');
        }
    }
</script>
</head>
<body>
<input type='button' id='btnok' value='匹配元素' />
<hr />
<ul>
    <li>小苹果</li>
    <li>小香蕉</li>
    <li>小菠萝</li>
</ul>
<ul>
    <li>小辣椒</li>
</ul>
</body>

表单元素选择器

• :input ：匹配所有的表单元素，也包括（select下拉与textarea文本域）
• :text ：匹配所有文本框
• :password ：匹配所有密码框
• :radio ：匹配所有单选按钮
• :checkbox ：匹配所有复选框
• :submit ：匹配所有提交按钮
• :reset ：匹配所有的重置按钮
• :image ：匹配所有的图像域
• :button ：匹配所有的button按钮
• :file ：匹配所有的文件域
• :hidden ：匹配所有隐藏表单

问题：请说出:input选择器与input选择器的区别？

:input ：匹配所有表单元素，包括（select下拉选框与textarea文本域）
input：匹配所有以input标签命名的表单元素。但是无法匹配 select 与 textarea。

示例代码：

<script>
    //定义页面载入事件
    window.onload = function() {
        //获取btnok按钮并绑定相关事件
        document.getElementById('btnok').onclick = function() {
            //1、获取所有表单元素
            //$('form :input').hide();
            //2、获取所有的单选框
            //$('form :radio').hide();
            //3、获取所有复选框
            //$('form :checkbox').hide();
            //4、获取textarea文本域
            $('form textarea').hide();
        }
    }
</script>
</head>
<body>
<input type="button" id='btnok' value='获取元素' />
<hr />
<form action='deal.php' method='post'>
    用户名：<input type='text' name='username' />
    <hr />
    密　码：<input type='password' name='password' />
    <hr />
    性　别：<input type='radio' name='sex' value='0' />男
        <input type='radio' name='sex' value='1' />女
    <hr />
    爱　好：<input type='checkbox' name='hobby[]' value='0' />吃饭
        <input type='checkbox' name='hobby[]' value='1' />睡觉
        <input type='checkbox' name='hobby[]' value='2' />打豆豆
    <hr />
    签　名：<textarea name='signature' cols='40' rows='5'></textarea>
    <hr />
    <input type='submit' name='submit' value='注册' />
</form>
</body>

表单对象属性选择器
• :enabled：匹配所有可用的表单元素
• :disabled：匹配所有不可用表单元素，
• :checked：匹配选中的表单元素（radio或checkbox）
• :selected：匹配下拉选框选中的表单元素

问题：在html表单元素中，我们可以使用disabled与readonly来禁止表单元素的可用性，那么两者之间有何区别呢？

答：虽然disabled与readonly都有禁止表单元素的可用性，但是两者有本质的区别：
disabled设置的表单元素，在服务器端是无法接收的。
readonly定义的元素，在服务器端其是可以正常接收的。

示例代码：

<script>
    //定义页面载入事件
    window.onload = function() {
        //获取按钮
        document.getElementById('btnok').onclick = function() {
            //1、获取所有可用的表单元素
            //$('form :input:enabled').hide();
            //2、获取所有不可用元素
            //$('form input:disabled').val('admin');
            //3、获取选中的元素
            //alert($('input[name="sex"]:checked').val());
            //4、获取下拉选中的元素
            alert($('#birthday option:selected').val());
        }   
    }
</script>
</head>
<body>
<input type="button" id='btnok' value='获取元素' />
<hr />
<form action='deal.php' method='post'>
    用户名：<input type='text' name='username' value='1' disabled='true' />
    <hr />
    密　码：<input type='password' name='password' />
    <hr />
    性　别：<input type='radio' name='sex' value='0' />男
        <input type='radio' name='sex' value='1' />女
    <hr />
    生　日：<select id='birthday'>
            <option value='1990'>1990</option>
            <option value='1991'>1991</option>
            <option value='1992'>1992</option>
            <option value='1993'>1993</option>
        </select>
    <hr />
    爱　好：<input type='checkbox' name='hobby[]' value='0' />吃饭
        <input type='checkbox' name='hobby[]' value='1' />睡觉
        <input type='checkbox' name='hobby[]' value='2' />打豆豆
    <hr />
    签　名：<textarea name='signature' cols='40' rows='5'></textarea>
    <hr />
    <input type='submit' name='submit' value='注册' />
</form>
</body>
</html>

DOM对象与jQuery对象的关系

结论：jQuery对象是一个DOM对象的集合。
综上所述：jQuery实质是一个类数组的特殊对象，这个对象是DOM对象的集合，每一个JQuery元素都是一个DOM对象。
假如：jquery对象[
Dom(对象),
Dom(对象),
];

DOM对象与jQuery对象的相互转换
var DOM对象 = jQuery对象[索引];
或
var DOM对象 = jQuery对象.get(索引);

$(dom对象)//dom装换成jquery对象

jQuery相关属性与方法

基本属性操作
• attr(name)：获取元素的name属性值
• attr(key,value)：设置元素的key属性值为value
• attr(properties)：一次为元素设置多个属性，要求参数是一个json对象
• attr(key,fn)：使用函数的返回值设置元素的属性
• removeAttr(name)：移除元素的name属性
例：

<script>
    //定义页面载入事件
    window.onload = function() {
        //获取btnok按钮并绑定相关事件
        $('#btnok').get(0).onclick = function() {
            //1、获取img标签的src属性值
            //alert($('img').attr('src'));
            //2、设置img标签的src属性值
            //$('img').attr('src','image/2.jpg');
            //3、一次为元素设置多个属性
            /*
            $('img').attr({
                src:'image/3.jpg',
                width:174,
                height:247
            });
            */
            //4、使用函数的返回值设置元素的属性
            /*
            $('img').attr('src',function(){
                return 'image/'+(Math.floor(Math.random()*54)+1)+'.jpg';
            });
            */
            //5、移除元素的src属性
            $('img').removeAttr('src');
        }
    }
</script>
</head>
<body>
<input type='button' id='btnok' value='元素attr属性操作' />
<hr />
<img src='image/1.jpg' />
</body>

class属性操作

• addClass(class)：为元素添加class属性
• removeClass(class)：移除元素的class属性
• toggleClass(class)：切换class属性，如果元素存在class属性则移除，反之则添加
• hasClass(class)：判断一个元素是否具有class属性，返回布尔类型的值
例：

<script>
    window.onload = function() {
        //获取btnok按钮并绑定相关事件
        $('#btnok').get(0).onclick = function() {
            //1、获取元素的css属性
            //var width = $('div').css('width');
            //alert(width);
            //2、设置元素的css属性
            //$('div').css('backgroundColor','yellow');
            //3、一次为元素设置多个css属性
            $('div').css({
                border:'1px #f00 solid',
                backgroundColor:'yellow'
            });
        }
    }
</script>
</head>
<body>
<input type='button' id='btnok' value='css属性操作' />
<hr />
<div style='width:400px; height:200px; border:1px #ccc solid;'>
    jQuery是一款免费且开源的Javascript代码库
</div>
</body>

offset位置操作

• offset() ：获取元素的位置，返回json格式的数据，包含left和top两个属性
• offset(coordinates) ：设置元素的位置，要求是一个json对象，必须要包含left和top两个属性

示例代码：

<script>
    //定义页面载入事件
    window.onload = function() {
        //获取btnok按钮并绑定相关事件
        $('#btnok').get(0).onclick = function() {
            //1、获取元素的位置
            //var json = $('#box').offset();
            //alert('横坐标：'+json.left+'纵坐标：'+json.top);
            //2、设置元素的位置
            $('#box').offset({
                left:500,
                top:50
            });
        }
    }
</script>
</head>
<body>
<input type='button' id='btnok' value='offset位置操作' />
<hr />
<div id='box'></div>
</body>

width与height尺寸操作
• width()：获取元素的宽度
• width(value)：设置元素的宽度
• height()：获取元素的高度
• height(value)：设置元素的高度

示例代码：

<script>
    window.onload = function() {
        //获取btnok按钮并绑定相关事件
        $('#btnok')[0].onclick = function() {
            //1、获取元素的尺寸
            //var width = $('#box').width();
            //var height = $('#box').height();
            //alert('宽度：'+width+'高度：'+height);
            //2、设置元素的尺寸
            $('#box').width(800);
            $('#box').height(400);
        }
    }
</script>
</head>
<body>
<input type='button' id='btnok' value='尺寸操作' />
<hr />
<div id='box'></div>
</body>