前端 之 jQuery: 属性操作; 操作input中的value; 文档操作***(二)

  • 属性操作
  • 操作input中的value
  • 文档操作***
  • ...
  • ...
  • ...
  • ...
  • ...

一, 属性操作

jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作

  • html属性操作：是对html文档中的属性进行读取，设置和移除操作。

　　　比如:

    • attr() 设置属性值或者 返回被选元素的属性值

      //获取值：attr()设置一个属性值的时候 只是获取值
        var id = $(‘div‘).attr(‘id‘)
        console.log(id)
        var cla = $(‘div‘).attr(‘class‘)
        console.log(cla)
        //设置值
        //1.设置一个值 设置div的class为box
        $(‘div‘).attr(‘class‘,‘box‘)
        //2.设置多个值，参数为对象，键值对存储
        $(‘div‘).attr({name:‘hahaha‘,class:‘happy‘})

      用法演示

    • removeAttr() 移除属性

      //删除单个属性
$(‘#box‘).removeAttr(‘name‘);
$(‘#box‘).removeAttr(‘class‘);

//删除多个属性
$(‘#box‘).removeAttr(‘name class‘);

      用法演示

  • DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。

　　　比如:

    • prop() 设置或返回被选元素的属性和值。

      //返回属性的值：
$(selector).prop(property)

//设置属性和值：
$(selector).prop(property,value)

//设置多个属性和值：
$(selector).prop({property:value, property:value,...})

      用法演示

    • removeProp()

      //删除单个属性
$(‘#box‘).removeProp(‘name‘);
$(‘#box‘).removeProp(‘class‘);

//删除多个属性
$(‘#box‘).removeProp(‘name class‘);

      用法演示

  • 类样式操作：是指对DOM属性className进行添加，移除操作。

　　　比如:

    • addClass() 为每个匹配的元素添加指定的类名; 还可以为匹配的元素添加多个类名

      //为每个匹配的元素添加指定的类名。
$(‘div‘).addClass("box");//追加一个类名到原有的类名

//还可以为匹配的元素添加多个类名
$(‘div‘).addClass("box box2");//追加多个类名

      用法演示

    • removeClass()  从所有匹配的元素中删除全部或者指定的类。且 也可以通过添加删除类名, 来实现元素的显示隐藏(代码如下):

      //移除指定的类（一个或多个）
$(‘div‘).removeClass(‘box‘)；

//移除全部的类
$(‘div‘).removeClass();

//通过添加删除类名，来实现元素的显示隐藏
var tag  = false;
        $(‘span‘).click(function(){
            if(tag){
                $(‘span‘).removeClass(‘active‘)
                tag=false;
            }else{
                $(‘span‘).addClass(‘active‘)
                tag=true;
            }
})

      用法演示

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
     <ul>
         <li class="item">张三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){

             $(‘ul li‘).click(function(){
                 // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
                 $(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘);
             })
         })
     </script>

</body>
</html>

      add+remove 小案例

    • toggleClass() 切换: 如果存在（不存在）就删除（添加）一个类。

      $(‘span‘).click(function(){
    //动态的切换class类名为active
    $(this).toggleClass(‘active‘)
})

      用法演示

  • 值操作：是对DOM属性value进行读取和设置操作。

　　　比如:

    • html() 获取值:(获取选中标签元素中所有的内容)/ 设置值:(设置该元素的所有内容 会替换掉 标签中原来的内容)

      //获取值：获取选中标签元素中所有的内容
var html_name = $(‘#box‘).html();

//设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$(‘#box‘).html(‘<a href="https://www.baidu.com">百度一下</a>‘);

      用法演示

    • text() 获取值：(获取匹配元素包含的文本内容)/ 设置值：(设置该所有的文本内容)

      //获取值： html() 是获取选中标签元素中所有的内容
$(‘#box‘).html();

//设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$(‘#box‘).html(‘<a href="https://www.baidu.com">百度一下</a>‘);

注意：注意：注意：
注意：注意：注意：
注意：注意：注意：
                         值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中

      用法演示

    • val() 获取值：(用于表单控件中获取值，比如input textarea select等等)设置值：

      //获取值：val()用于表单控件中获取值，比如input textarea select等等

//设置值：
$(‘input‘).val(‘设置了表单控件中的值‘)；

      用法演示

关于attr()和prop()的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    男<input type="radio" id=‘test‘ name="sex"  checked/>
    女<input type="radio" id=‘test2‘ name="sex" />
    <button>提交</button>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //获取第一个input
            var el = $(‘input‘).first();
            //undefined  因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined
            console.log(el.attr(‘style‘));
            // 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象
            console.log(el.prop(‘style‘));
            console.log(document.getElementById(‘test‘).style);

            $(‘button‘).click(function(){
                alert(el.prop("checked") ? "男":"女");
            })

        })
    </script>

</body>
</html>

什么时候使用attr()，什么时候使用prop()？

1.是有true,false两个属性使用prop();

2.其他则使用attr();

二, 操作input中的value

此处用到的就是 val方法,  且涉及到的是 form表单单选,多选选项时, 往后端发送的一些可识别,且方便获取,处理的数据.

正常情况下, 单选表单中的 checked 属性的值为 "checked", 倘若,每回都给后端发 此值, 那么后端根本无法处理, 且, 此checked的属性的值不能进行随便的更改, 只能通过 val来更改.

详情请见代码:

HTML结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="">
            <input type="radio" name="sex"  value="112" />男
            <!-- 设置cheked属性表示选中当前选项 -->
            <input type="radio" name="sex"  value="11" checked="" />女
            <input type="radio" name="sex"  value="11" />gay

            <input type="checkbox" value="a" checked=""/>吃饭
            <input type="checkbox" value="b" />睡觉
            <input type="checkbox" value="c" checked=""/>打豆豆

    <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->
            <select name="timespan" id="timespan" class="Wdate"   >
                <option value="1">8:00-8:30</option>
                <option value="2" selected="">8:30-9:00</option>
                <option value="3">9:00-9:30</option>
            </select>
            <input type="text" name="" id="" value="111" />
    </form>

</body>
</html>

Jquery 操作form表单控件代码如下:

<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function(){
            // 一、获取值
                //1.获取单选框被选中的value值
                console.log($(‘input[type=radio]:checked‘).val())

                //2.复选框被选中的value,获取的是第一个被选中的值
                console.log($(‘input[type=checkbox]:checked‘).val())

                //3.下拉列表被选中的值

                var obj = $("#timespan option:selected");
                // 获取被选中的值
                var  time  = obj.val();
                console.log(time);
                // 获取文本
                var  time_text  = obj.text();
                console.log("val:"+time+" text"+ time_text );

                //4.获取文本框的value值
                console.log($("input[type=text]").val())//获取文本框中的值

                // 二.设置值
                //1.设置单选按钮和多选按钮被选中项
                $(‘input[type=radio]‘).val([‘112‘]);
                $(‘input[type=checkbox]‘).val([‘a‘,‘b‘]);

                //2.设置下拉列表框的选中值，必须使用select
                /*因为option只能设置单个值，当给select标签设置multiple。
                那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以
                */
                $(‘select‘).val([‘3‘,‘2‘])

                //3.设置文本框的value值
                $(‘input[type=text]‘).val(‘试试就试试‘)

        })

    </script>

三, 文档操作***(重点)

jQuery的文档操作 就是 js中对DOM操作 进行了封装后提供的方法:

1, 插入操作:

  • append:

　　　　父元素.append(子元素)       追加某元素.  在父元素中 最后追加新的元素, 子元素可以为: stirng,  element(js对象),  jquery元素;　

// 代码 如下
var oli = document.createElement(‘li‘);
oli.innerHTML = ‘哈哈哈‘;
$(‘ul‘).append(‘<li>1233</li>‘);
$(‘ul‘).append(oli);
$(‘ul‘).append($(‘#app‘));

　　　　ps:  如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作

  • appendTo:

　　　　子元素.appendTo(父元素)     把子元素追加到父元素的里面的最后, 子元素同样可以是: stirng,  element(js对象),  jquery元素;

$(‘<li>天王盖地虎</li>‘).appendTo($(‘ul‘)).addClass(‘active‘)
  • prepend:

父元素.prepend(子元素)    前置添加， 添加到父元素的第一个位置

$(‘<a href="#">路飞学诚</a>‘).prependTo(‘ul‘)
  • prependTo:

子元素.prependTo(父元素)      前置添加， 添加到父元素的第一个位置

 $(‘<a href="#">路飞学诚</a>‘).prependTo(‘ul‘)
  • after:

兄弟元素.after(要插入的兄弟元素)       在匹配的元素之后插入内容

$(‘ul‘).after(‘<h4>我是一个h3标题</h4>‘)
  • inserAfter:

要插入的兄弟元素.inserAfter(兄弟元素)          在匹配的元素之后插入内容

$(‘<h5>我是一个h2标题</h5>‘).insertAfter(‘ul‘)
  • before:

兄弟元素.before(要插入的兄弟元素)           在匹配的元素之前插入内容

$(‘ul‘).before(‘<h3>我是一个h3标题</h3>‘)
  • inserBefore:

要插入的兄弟元素.inserBefore(兄弟元素)               在匹配的元素之前插入内容

$(‘<h2>我是一个h2标题</h2>‘).insertBefore(‘ul‘)

2, 克隆操作:(鸡肋)

语法：

$(选择器).clone();

解释：克隆匹配的DOM元素

$(‘button‘).click(function() {

  // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
  $(this).clone(true).insertAfter(this);
})

3, 修改操作:

  • replaceWich: 将所有匹配的元素替换成指定的string、js对象、jquery对象

    //语法：
$(selector).replaceWith(content);

// 实例:

//将所有的h5标题替换为a标签
$(‘h5‘).replaceWith(‘<a href="#">hello world</a>‘)
//将所有h5标题标签替换成id为app的dom元素
$(‘h5‘).replaceWith($(‘#app‘));
  • replaceAll: 替换所有

    // 语法：
$(‘<p>哈哈哈</p>‘)replaceAll(‘h2‘);

// 解释：替换所有。将所有的h2标签替换成p标签。
$(‘<br/><hr/><button>按钮</button>‘).replaceAll(‘h4‘)

4, 删除操作:

  • remove   删除节点后，事件也会删除（简言之，删除了整个标签）

    //语法：
    $(selector).remove(); 
    $(‘ul‘).remove(); // 删除所有 ul 标签
  • detach   删除节点后，事件会保留

    // 语法：
$(selector).detach(); 

// 实例
 var $btn = $(‘button‘).detach()
 //此时按钮能追加到ul中
 $(‘ul‘).append($btn)
  • empty    清空选中元素中的所有后代节点

    // 语法：
$(selector).empty(); 

//清空掉ul中的子元素，保留ul
$(‘ul‘).empty()

...

...

...

...

...

原文地址：https://www.cnblogs.com/Fushengliangnian/p/9506877.html

时间： 2024-08-02 13:37:56

前端 之 jQuery: 属性操作; 操作input中的value; 文档操作***(二)的相关文章

视频会议软件中的协同文档技术

现今的视频会议软件产品不单只是音.视频的传输,还包括协同数据功能.协同数据功能主要包括:电子白板共享.文档协同浏览.共享桌面等功能.现在我们主要讨论的是视频会议软件中的协同文档技术.协同文档浏览主要是通过协同浏览的方式,把主持人现场所打开的文档,传送给其他的客户端,从而其他的客户端可以实时看到主持人的操作.协同文档浏览技术一般可以通过几种方式来实现,每种实现方式有其优缺点: 1.直接文档上传方式 直接文档上传方式就是把文档上传到MCU服务器,然后记录主持人操作文档的类型.相关信息,并实时传输主持

Jquery框架之选择器|效果图|属性|文档操作

JavaScript和jquery的区别 Javascript是一门编程语言,我们用它来编写客户端浏览器脚本. jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发 jQuery能做的javascipt都能做到,而javascript能做的事情,jQuery不一定能做到 注意:一般情况下,是库的文件,该库中都会抛出来构造函数或者对象,如果是构造函数,那么使用new关键字创建对象,如果是对象直接调用属性和方法 DOM文档加载的步骤 解析HTML

jQuery 样式操作、文档操作、属性操作的方法总结

文档操作: addClass()             向匹配的元素添加指定的类名.after()                    在匹配的元素之后插入内容.append()               向匹配元素集合中的每个元素结尾插入由参数指定的内容.appendTo()           向目标结尾插入匹配元素集合中的每个元素.attr()                     设置或返回匹配元素的属性和值.before()                在每个匹配的元素之前插

38.前端jQuery之文档操作

1.文档操作内部插入 A.append(B) 吧B添加到A的后面 A.appendTo(B) 吧A添加到B的后面 A.prepend(B) 吧B添加到A的前面 A.prependTo(B) 吧A添加到B的前面外部插入 A.after(B) 吧B添加到A的后面 A.insertAfter(B) 吧A添加到B的后面 A.before(B) 吧B添加到A的前面 A.insertBefore(B) 吧A添加到B的前面2.克隆操作 $(选择器).clone(); 例 <!DOCTYPE html> &l

jQuery的文档操作(重点)/简单接触ajax(和风天气)

一.jQuery的文档操作****** 之前js中学习了js的DOM操作,也就是所谓的增删改查DOM操作.通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果.那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档. 看一个我们JS操作DOM的例子: var oUl = document.getElementsByTagName('ul')[0]; var oLi = document.createElement('li'); oLi.innerHTML = '

jquery之文档操作

jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color", "#ff0000") -> 设置值 - .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值 - .css(

word 文档操作类，可以读出word中书签 批量替换内容，直接调用

using System;using System.Collections.Generic;using System.Text;using Word = Microsoft.Office.Interop.Word; namespace ELO.BLL{ /* * Description:用于Word基本操作类 */public partial class Helper_Word { #region 私有成员 private Word.ApplicationClass _wordApplicati

C# 中使用word文档对图像进行操作

C# 中使用Word文档对图像进行操作 Download Files: ImageOperationsInWord.zip 简介 在这篇文章中我们可以学到在C#程序中使用一个Word文档对图像的各种操作.图像会比阅读文字更有吸引力,而且图像是与内容紧密相关的.有时图像可以将内容描述的更为清晰,就像使用图表显示某一周期内的数据变化. Spire.Doc for .NET(http://www.e-iceblue.com/Introduce/Word-for-net-introduce.html)是

ExtJs4学习（二）：Dom文档操作

现在主流的JS框架要数ExtJs和JQuery应用的比较广泛.JQuery属于轻量级的,一般做网站应用比较常见,可见块头小的优势.ExtJs比较庞大,它除了对基本的JS语法和HTML DOM操作方式的封装之外,还提供了一套强大的UI库.在企业级B/S解决方案应用上独占优势.就单说它在原生JS的封装,DOM操作方式封装方面也足以藐视JQuery.下面我就通过对比API,体现两种框架的异曲同工之处.我们已JQuery API为主线,来看看ExtJs是否有替代的方案. 注意一点:ExtJs4.0相对上