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基础(四)的更多相关文章

  1. Web前端国际化之jQuery.i18n.properties

    Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...

  2. 【前端】之jQuery基础知识

    jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...

  3. 第四篇 前端学习之JQuery基础

    一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...

  4. Web前端基础(19):jQuery基础(六)

    1. ajax 1.1 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通 ...

  5. Web前端基础(16):jQuery基础(三)

    1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.1 显示动画 方式一: $("div&quo ...

  6. Web前端基础(18):jQuery基础(五)

    1. 事件 前面我们介绍完js的事件流的概念之后,相信大家对事件流也有所了解了.那么接下来我们看一下jquery的事件操作. 在说jquery的每个事件之前,我们先来看一下事件对象 . 1.1 事件对 ...

  7. Web前端基础(15):jQuery基础(二)

    1. jQuery选择器 jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素. 1.1 基本选择器 例子如下: <!DOCTYPE html> ...

  8. Web前端基础(14):jQuery基础(一)

    1. jQuery概述 1.1 为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  9. web前端篇:JavaScript基础篇(易懂小白上手快)-1

    目录 详细内容: 0.JavaScript的引入 1.第一个JavaScript 2.变量 3.变量的类型 4.数组 5.条件语句 6.三元运算符 7.循环 8.函数 9.对象(object): 10 ...

随机推荐

  1. 微服务架构 SpringBoot(一)

    spring Boot:官网地址 https://spring.io/ 由来: 随着spring组件功能的强大,配置文件也越来越复杂繁琐,背离了spring公司的简洁快速开发原理,2015年就推出Sp ...

  2. OPCode 详解

    OpCode 操作码(Operation Code, OPCode):描述机器语言指令中,指令要执行某种操作的机器码 OPCode在不同的场合中通常具有不同的含义,例如PHP虚拟机(Zend VM). ...

  3. GIT实用操作指令(更新中)

    提取多次提交的文件 git archive --format=zip HEAD `git diff --name-only 较早的提交ID 较晚的提交ID` > diff.zip

  4. oop面向对象【接口、多态】

    今日内容 1.接口 2.三大特征——多态 3.引用类型转换 教学目标 1.写出定义接口的格式 2.写出实现接口的格式 3.说出接口中成员的特点 4.能够说出使用多态的前提条件 5.理解多态的向上转型 ...

  5. SMTP email from C#

    /// <summary> /// 一人一附件发送邮件 /// 2017-05-17 涂聚文 GeovinDu /// </summary> /// <param nam ...

  6. 一键删除数据库所有的外键约束-FOREIGN_KEYS

    DECLARE @ESQL VARCHAR(1000);DECLARE FCursor CURSOR --定义游标FOR (SELECT  'ALTER TABLE '+O.name+' DROP  ...

  7. 简单的权限管理php

    转发自https://www.cnblogs.com/shenzikun1314/p/6604867.html#4262295 首先,要明白的基础理论是用户,角色,权限之间的关系是一对多,还是多对多. ...

  8. 搭建部署Docker

    Docker安装准备: 首先看下服务器是否有旧版本,如果有需要卸载并且安装依赖 yum remove docker docker-client docker-client-latest docker- ...

  9. MS16-072域内中间人攻击

    0x01 漏洞利用 在目标主机域用户口令已知的条件下,目标主机在进行策略更新时,对域服务器的认证存在漏洞,攻击者劫持认证服务器的过程,引导至伪造的域服务器,并在域服务器中制定用户的计划任务策略,可以获 ...

  10. Kali Linux configuration "Ettercap"

    Xx_Instroduction Ettercap is a man-in-the-middle attack(MITM) tool,kali take this tool,so,use front ...