jQuery 常用点①

最新推荐文章于 2024-07-24 16:20:17 发布

菜鸟学习中心

最新推荐文章于 2024-07-24 16:20:17 发布

阅读量93

点赞数

分类专栏： JavaScript 文章标签： jquery javascript js

本文链接：https://blog.csdn.net/qq_23107065/article/details/104178327

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

事件、基本的选择器、文档处理、动态的加入一些属性或类名
通过animate()，引出定时器的概念
通过jQuery选择器（元素、类、id选择器），对DOM元素（div、p、h）强行修改一些样式

文章目录

- jQuery中用的比较多的（详细了解可阅读jq文档）：

jQuery中用的比较多的（详细了解可阅读jq文档）：

一、核心

①jQuery 对象访问

计算任意元素的个数：$('元素名').length();

二、属性

①属性

动态获取元素属性或给元素设置一些自定义的属性：attr(name|properties|key,value|fn);
可以设置的属性有：①：自定义属性；②：系统属性
设置系统属性时，如果系统属性有默认值，则设置的值可以为'true'也可以为'默认值'

// 动态获取元素属性值或给元素设置一些自定义的属性
$('div').attr('flag', '123') // 设置一个属性,参数1：属性名；参数二：属性值
//设置系统(内置)属性时，如果系统(内置)属性有默认值，则设置的值可以为'true'也可以为'默认值'
$('p').attr({ flag1: '123', flag2: '456' }); // 设置多个属性

res = $('div').attr('flag'); //  获取一个属性
console.log(res);

元素设置系统属性由专门的方法：'prop(name|properties|key,value|fn)'

$("input[type='checkbox']").prop("checked",'true/checked');// 获取时结果都为true

移除元素的属性（系统的、自定义的）：removeAttr('name');
只能移除由自定义的属性：removeProp('name');

②CSS类

为每个匹配的元素添加指定的类名： addClass(class|fn);

//为匹配的元素加上 'selected' 类,一个或多个要添加到元素中的CSS类名，请用空格分开
$("p").addClass("selected");
// $("p").addClass("selected1 selected2");

从所有匹配的元素中删除全部或者指定的类：removeClass([class|fn]);

//从匹配的元素中删除 'selected' 类
$("p").removeClass("selected");
//删除匹配元素的所有类
$("p").removeClass();

如果存在（不存在）就删除（添加）一个类：toggleClass(class|fn[,sw])

//为匹配的元素切换 'selected' 类，如果有该类则移除，如果无则添加
 $("p").toggleClass("selected");

③HTML代码/文本/值

平时操作HTML文本的时候一般来说要么操作DOM的class（定义/移除样式），还有一种是操作DOM元素的内容。

取得所有匹配元素的内容（字符串）：text([val|fn]);

//返回p元素的文本内容。
$('p').text();
//设置所有 p 元素的文本内容
$("p").text("Hello world!");

text的应用：

//setTimeout(function() { clickme() }, 5000);
function clickme() {
    var res = $('#btn1').text();
    if (res == "获取验证码") {
        // 调用计时函数
        set_time();
    }
}

function set_time() {
    // 开启定时器后禁用按钮
    $('#btn1').attr('disabled', true);
    // 设置倒计时的时间长度
    var i = 60;
    // 正式倒计时
    var time = setInterval(
        function() {
            $('#btn1').text(i);
            if (i <= 0) {
                // 倒计时结束时
                $('#btn1').text('获取验证码');
                $('#btn1').attr('disabled', false);
                //清除定时器
                clearInterval(time);
            }
            i--;
        },
        1000
    );
}

取得所有匹配元素的第一个HTML元素（标签+内容）：html([val|fn]);
获得匹配元素的当前值：val([val|fn|arr]);

三、选择器

基本

元素选择器： var div = $('div');
类选择器： var toHidden = $('.toHidden');
ID选择器： var toExten = $('#toExten');
群选择器： var nodes = $('div, p, ul, ol');
通用选择器：var anyNodes = $('*');

层级

选择给定的祖先元素的所有后代元素（儿子、孙子…），如：$("form input")，找到form表单中的所有input元素
选择所有指定“parent”元素中指定的"child"的直接子元素。如： $("form > input")，只找儿子元素，不找孙子、曾孙。
选择所有紧接在 “匹配” 元素后的 “第一个” 元素。如：$("label + input");

<script type="text/javascript">
// 1、选择给定的祖先元素的所有后代元素。
var res = $("form input");
console.log('一共有' + res.length + '个后代元素');
$.each(res, function(i, v) {
    console.log(v);
})
// 2、选择所有指定“parent”元素中指定的"child"的直接子元素。 
var res = $('form>input');
console.log('一共有' + res.length + '个直接后代元素');
$.each(res, function(i, v) {
    console.log(v);
})
// 3、选择所有紧接在 “匹配” 元素后的 “第一个” 元素 
var res = $('label+input');
console.log('紧接着匹配元素后的元素一共有' + res.length + '个');
$.each(res, function(i, v) {
    console.log(v);
})
</script>

基本

选择第一个匹配的DOM元素。 $('li:first');
在匹配的集合中选择索引值为index的元素。 'li:eq(1)';
选择匹配集合中所有大于给定index（索引值）的元素。'li:gt(1)';
选择匹配集合中所有索引值小于给定index参数的元素。 'li:lt(1)';
选择最后一个匹配的元素。'li:last'；

<!DOCTYPE html>
<html>
<head>
    <title> </title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
    <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>
</body>
</html>
<script type="text/javascript">
// 选择第一个匹配的DOM元素。
res = $('ul li:first');
$.each(res, function(i, v) {
    console.log(v);
})

// 在匹配的集合中选择索引值为index的元素。 
res = $('li:eq(1)');
$.each(res, function(i, v) {
    console.log(v);
})

// 选择匹配集合中所有大于给定index（索引值）的元素。
res = $('li:gt(1)');
$.each(res, function(i, v) {
    console.log(v);
})
// 选择匹配集合中所有索引值小于给定index参数的元素。 
res = $('li:lt(1)');
$.each(res, function(i, v) {
    console.log(v);
})

// 选择最后一个匹配的元素
res = $('li:last');
$.each(res, function(i, v) {
    console.log(v);
})
</script>

可见性(开发后台比较常用)

选择所有隐藏的元素。 jQuery(":hidden" );
选择所有可见的元素。 jQuery(":visible" );

console.log($(':hidden'));
console.log($(':visible'));
</script>

属性

选择所有含有指定属性的元素，该属性可以是任何值。 jQuery( "[attribute]" );
选择指定属性是给定值的元素。jQuery( "[attribute='value']" );
选择不存在指定属性，或者指定的属性值不等于给定值的元素。jQuery( "[attribute!='value']" );
选择指定属性具有包含一个给定的子字符串的元素。jQuery( "[attribute*='value']" );

<!DOCTYPE html>
<html>
<head>
    <title>
    </title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
    <input type1="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type2="checkbox" name="newsletter" value="Cold Fusion" />
    <input type3="checkbox" name="icon accept" value="Evil Plans" />
</body>
</html>
<script type="text/javascript">
// 选择所有含有指定属性的元素，该属性可以是任何值。 
var res = $('input[type1]');
$.each(res, function(i, v) {
    console.log(v);
})
// 选择指定属性是给定值的元素。
var res = $('input[name="newsletter"]');
$.each(res, function(i, v) {
    console.log(v);
})
// 选择指定属性是以给定字符串开始的元素 
var res = $('input[name^="acc"]');
$.each(res, function(i, v) {
    console.log(v);
})
// 选择指定属性具有包含一个给定的子字符串的元素
var res = $('input[name*="accept"]');
$.each(res, function(i, v) {
    console.log(v);
})
</script>

表单

选择所有 input, textarea, select 和 button 等可输入元素. $(":input");

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<form>
    <input type="button" value="Input Button" />// 这样写button不专业，此处只是为了演示
    <input type="checkbox" />
    <input type="submit" />
    <input type="text" />
    <select>
        <option>Option1</option>
        <option>Option2</option>
    </select>
    <textarea></textarea>
    <button>Button</button>
</form>
</body>

</html>
<script type="text/javascript">
// 选择所有 input, textarea, select 和 button 等可输入元素
var res = $(":input");
$.each(res, function(i, v) {
    console.log(v);
})
</script>

表单对象属性

选择所有可用的（手册网注：未被禁用的元素）元素。 $("input:enabled");
选择所有被禁用的元素。$("input:disabled");
匹配所有勾选的元素。 $("input:checked");
匹配所有选中的option元素.$("select option:selected");

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
    <form>
        <input name="email" disabled="disabled" />
        <input name="id" />
        <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
        <input type="checkbox" name="newsletter" value="Weekly" />
        <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
        <select name="province">
            <option value="beijing" selected='true'>北京 </option>
            <option values="shanghai">上海 </option>
            <option value="sanhui">安徽 </option>
        </select>
    </form>
</body>
</html>
<script type="text/javascript">
//选择所有可用的（手册网注：未被禁用的元素）元素
var res = $("input:enabled");
$.each(res, function(i, v) {
    console.log(v);
})
// 选择所有被禁用的元素。
var res = $("input:disabled");
$.each(res, function(i, v) {
    console.log(v);
})
// 匹配所有勾选的元素。
var res = $("input[name='newsletter']:checked");
$.each(res, function(i, v) {
    console.log(v);
})
// 匹配所有选中的option元素
console.log($('select[name="province"]').val());
console.log($('select option:selected').text());
</script>

四、文档处理

写特效时，需要往文档中插入一些HTML内容或文本内容

// 内部插入
// 在每个匹配元素里面的末尾处插入参数内容。（元素内部）
$('.inner').append('<p>Test</p>'); // 前者包含后者，前者在后者的内容后面

// 将匹配的元素插入到目标元素的最后面（译者注：内部插入）。
$('<p>Test</p>').appendTo('.inner'); // 前者包含于后者，前者在后者的内容后面

// 将参数内容插入到每个匹配元素的前面（元素内部）。
$('.inner').prepend('<p>Test</p>'); // 前者包含后者，但后者在前者内容的前面


// 外部插入
// 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
$('.inner').after('<p>Test</p>'); // 前者在后者后面

// 根据参数设定，在匹配元素的前面插入内容（译者注：外部插入） 
$('.inner').before('<p>Test</p>'); // 前者在后者前面

// 替换
// 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。 
$('div.second').replaceWith('<h2>New heading</h2>'); //前者被后者替换

// 用集合的匹配元素替换每个目标元素。 
$('<h2>New heading</h2>').replaceAll('.inner'); // 前者替换后者


// 删除
// 将匹配元素集合从DOM中删除。（手册网注：同时移除元素上的事件及 jQuery 数据。） 
$('.hello').remove();

五、筛选

// #### 筛选
// 过滤
// 匹配元素的集合减少为指定的索引的那一个元素。
$('li').eq(2).css('background-color', 'red'); // 等价选择器中的基本中的: :eq();$('li:eq(2)');

// 获取匹配元素集合中第一个元素。 
$('li').first().css('background-color', 'red'); // $('li:first');

// 获取匹配元素集合中最后一个元素。 
$('li').last().css('background-color', 'red'); // $('li:last');

// 确定任何一个匹配元素是否有被分配给定的（样式）类。 
$('#mydiv').hasClass('foo');

// 查找
// 获得匹配元素集合中每个元素的子元素，选择器选择性筛选。 
$('ul.level-2').children().css('background-color', 'red');

// 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代。 
$('li.item-ii').find('li').css('background-color', 'red');

// 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器。 
$('li.item-a').parent().css('background-color', 'red');

// 获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。
$('li.third-item').siblings().css('background-color', 'red');

菜鸟学习中心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 常用点①

事件、基本的选择器、文档处理、动态的加入一些属性或类名通过animate()，引出定时器的概念通过jQuery选择器（元素、类、id选择器），对DOM元素（div、p、h）强行修改一些样式jQuery中用的比较多的（详细了解可阅读jq文档）：一、核心①jQuery 对象访问计算任意元素的个数：$('元素名').length();二、属性①属性动态获取元素属性或给元素设置一些...
复制链接

扫一扫

专栏目录