1. jQuery的属性操作

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

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()

DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()

类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()

值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

1.1 html属性操作

1.1.1 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'})

1.1.2 removeAttr()

移除属性

//删除单个属性

$('#box').removeAttr('name');

$('#box').removeAttr('class');

//删除多个属性

$('#box').removeAttr('name class');

1.2 DOM属性操作

1.2.1 prop()

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

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

返回属性的值：

$(selector).prop(property)

设置属性和值：

$(selector).prop(property,value)

设置多个属性和值：

$(selector).prop({property:value, property:value,...})

1.2.2 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()。

1.3 类样式操作

1.3.1 addClass

为每个匹配的元素添加指定的类名。

$('div').addClass("box");//追加一个类名到原有的类名

还可以为匹配的元素添加多个类名。

$('div').addClass("box box2");//追加多个类名

1.3.2 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>

1.3.3 toggleClass

如果存在（不存在）就删除（添加）一个类。

语法：toggleClass('box')

$('span').click(function(){

    //动态的切换class类名为active

    $(this).toggleClass('active')

})

1.4 值操作

1.4.1 html

html()：是获取选中标签元素中所有的内容

$('#box').html();

设置值：设置该元素的所有内容会替换掉标签中原来的内容

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

1.4.2 text

text()：获取匹配元素包含的文本内容

$('#box').text();

设置该所有的文本内容

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

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

1.4.3 val

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

$('input').val();

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

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

2. 操作input的value值

表单控件是我们的重中之重，因为一旦牵扯到数据交互，离不开form表单的使用，比如用户的注册登录功能等

那么通过上章知识点我们了解到，我们在使用jquery方法操作表单控件的方法：

$(selector).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>

操作表单控件代码如下：

<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>

3. 文档操作

之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作，大家也能发现，大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。

看一个之前我们js操作DOM的例子：

var oUl = document.getElementsByTagName('ul')[0];

var oLi = document.createElement('li');

oLi.innerHTML = '赵云';

oUl.appendChild(oLi);

3.1 插入操作

(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'));

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

(2) appendTo

语法：

父元素.prepend(子元素)；

追加到某元素，子元素添加到父元素

$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素。

(3) prepend

语法：

父元素.prepend(子元素)；

前置添加，添加到父元素的第一个位置。

$('ul').prepend('<li>我是第一个</li>')

(4) prependTo

语法：

子元素.prependTo(父元素)；

前置添加，添加到父元素的第一个位置

$('<a href="#">小灰灰</a>').prependTo('ul')

(5) after和insertAfter

语法：

兄弟元素.after(要插入的兄弟元素)；

要插入的兄弟元素.insertAfter(兄弟元素)；

在匹配的元素之后插入内容

$('ul').after('<h4>我是一个h3标题</h4>')

$('<h5>我是一个h2标题</h5>').insertAfter('ul')

(6) before和insertBefore

语法：

兄弟元素.before(要插入的兄弟元素)；

要插入的兄弟元素.insertBefore(兄弟元素)；

在匹配的元素之后插入内容

$('ul').before('<h3>我是一个h3标题</h3>')

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

3.2 克隆操作

语法：

$(选择器).clone();

克隆匹配的DOM元素

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

// 1.clone()：克隆匹配的DOM元素

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

    $(this).clone(true).insertAfter(this);

})

3.3 修改操作

(1) replaceWith

语法：

$(selector).replaceWith(content);

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

//将所有的h5标题替换为a标签

$('h5').replaceWith('<a href="#">hello world</a>')

//将所有h5标题标签替换成id为app的dom元素

$('h5').replaceWith($('#app'));

(2) replaceAll

语法：

$('<p>哈哈哈</p>')replaceAll('h2');

替换所有。将所有的h2标签替换成p标签。

$('<br/><hr/><button>按钮</button>').replaceAll('h4')

3.4 删除操作

(1) remove

语法：

$(selector).remove();

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

$('ul').remove();

(2) detach

语法：

$(selector).detach();

删除节点后，事件会保留

var $btn = $('button').detach()

//此时按钮能追加到ul中

$('ul').append($btn)

(3) empty

语法：

$(selector).empty();

清空选中元素中的所有后代节点

//清空掉ul中的子元素，保留ul

$('ul').empty()

Web前端基础(17):jQuery基础(四)的更多相关文章

Web前端国际化之jQuery.i18n.properties
Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...
【前端】之jQuery基础知识
jQuery 简介在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中在标签下添加jQuery引用:&l ...
第四篇前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
Web前端基础(19):jQuery基础(六)
1. ajax 1.1 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通 ...
Web前端基础(16):jQuery基础(三)
1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.1 显示动画方式一: $("div&quo ...
Web前端基础(18):jQuery基础(五)
1. 事件前面我们介绍完js的事件流的概念之后,相信大家对事件流也有所了解了.那么接下来我们看一下jquery的事件操作. 在说jquery的每个事件之前,我们先来看一下事件对象 . 1.1 事件对 ...
Web前端基础(15):jQuery基础(二)
1. jQuery选择器 jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素. 1.1 基本选择器例子如下: <!DOCTYPE html> ...
Web前端基础(14):jQuery基础(一)
1. jQuery概述 1.1 为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...
web前端篇：JavaScript基础篇（易懂小白上手快）-1
目录详细内容: 0.JavaScript的引入 1.第一个JavaScript 2.变量 3.变量的类型 4.数组 5.条件语句 6.三元运算符 7.循环 8.函数 9.对象(object): 10 ...

随机推荐

深度强化学习（DQN-Deep Q Network）之应用-Flappy Bird
深度强化学习(DQN-Deep Q Network)之应用-Flappy Bird 本文系作者原创,转载请注明出处:https://www.cnblogs.com/further-further-fu ...
[译]C# 7系列，Part 9: ref structs ref结构
原文:https://blogs.msdn.microsoft.com/mazhou/2018/03/02/c-7-series-part-9-ref-structs/ 背景在之前的文章中,我解释了 ...
3、看源码MVC中的Controllr的Json方法
无论ViewResult还是JsonResult都继承ActionResult,ActionResult里只有一个方法ExecuteResult 1.Controllr的Json方法实际上是new ...
C#中提示：当前上下文中不存在名称“ConfigurationManager”
场景想要在程序中获取App.config中设置的内容. 想要通过 ConfigurationManager.AppSettings[key]; 来进行获取,已经添加 using System.Con ...
c++--语言本身
c++ 面向对象概念(cout cin 类.对象面向对象和面向过程求解问题) 易犯错误模型(引入成员函数的必要性) C语言和C++语言的关系 namespace 定义(嵌套).使用.标准命名空间st ...
Redis中几个简单的概念：缓存穿透/击穿/雪崩，别再被吓唬了
Redis中几个“看似”高大上的概念,经常有人提到,某些好事者喜欢死扣概念,实战没多少,嘴巴里冒出来的全是高大上的名词,个人一向鄙视概念党,呵呵! 其实这几个概念:缓存穿透/缓存击穿/缓存雪崩,有一个 ...
你竟然没用 Nuget 构建项目？
想写这篇文章缘起于公众号文章里的一条留言: 对于一个现代化的开发平台,建立一种让开发者创建,分享与使用可复用代码的机制是十分必要的.这种"可复用代码"被打包后的文件通常被称作&qu ...
Spring Cloud Finchley.SR1 版本的坑：placeholer占位符无法解析！
接入nacos 之后,想把所有的配置丢上去. 启动程序是: @EnableDiscoveryClient @RestController @ComponentScan(basePackages = { ...
Hive concat函数连接后结果为null
Hive concat函数连接后结果为null concat函数是用来连接字符串的使用示例: select concat('Hello','World','Java'); 运行结果: 最近我们在做需 ...
HttpRunner学习2--用例格式和简单使用
前言 HttpRunner中,测试用例支持两种文件格式:YAML 和 JSON.两种格式的用例是完全等价的,对于相同的信息内容,使用 YAML /JSON 得到的测试结果和报告也是一致的. 本人环境: ...

Web前端基础(17):jQuery基础(四)