(19)jQuery操作文本和属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq操作文本和操作属性</title>
</head>
<body>
<div class="box">box</div>
<input class="inp" type="text">
<button class="btn">打印输入的内容</button>
<button class="getImg">获取图片</button>
<img class="img" src="" alt="">
</body>
<script src="js/jq.js"></script>
<script>
//jq获取文本
var txt = $('.box').text();
console.log(txt) //修改纯文本
$('.box').text('这里填写需要修改的文本'); //设置html类型文本,直接修改标签类型
$('.box').html('<b>这样写就是修改标签的类型</b>>') //input框
$('.btn').click(function () {
//获取input框的内容并打印,打印框内没有内容就输出空
var v = $('.inp').val(); //val就是获取,val不给值就是获取,给值就是赋值
console.log(v);
//打印框的内容置空(用户在输入框中输入内容,点击按钮后提交内容后将输入框内容清除),直接赋值一个空内容即可
$('.inp').val("");
}) //操作属性
//img标签的内容属于资源,既不是text,也不是value,而是src
//操作按钮显示图片和隐藏图片
$('.getImg').click(function () {
//先获取img标签下sc的值
var src = $('img').attr('src');
if (src){
$('.img').attr('src',''); //如果有值就设置为空
}else{
//对img标签的src进行赋值
$('.img').attr('src','http://scimg.jb51.net/allimg/150803/14-150P315312YB.jpg') //attr就是操作全局属性,如果只有一个src就是获取原来的src,然后再给一个值就是设置赋值
}
}) </script>
</html>
(19)jQuery操作文本和属性的更多相关文章
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuar总结10:jQuery操作元素的属性
jQuery操作元素的属性 1 设置单个属性 //html <div></div> //js $('div').attr('id', 'box'); $('div').attr ...
- Jquery操作文本内容(三个方法:html()、text()、var())
Jquery操作文本内容(三个方法:html().text().var()) 一.html()获取和设置文本内容和标签 1.获取标签里的结构和内容 $("ul").html() / ...
- 使用jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- 《从零开始学习jQuery》:用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...
- jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- JQuery 操作对象的属性值
通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...
- JQuery操作元素的属性与样式及位置 复制代码
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...
随机推荐
- 补交第二周作业:学习ka li
在老师给的虚拟机上安装,试了n次都没有安装成功,百度上的说法也是众说纷纭. 之后重新安装了另一个版本的虚拟机,按照教程成功装上了ka li. 一. 安装VMtools:是为了方便宿主机与虚拟机间的文件 ...
- Win10系列:JavaScript访问文件和文件夹
在实际开发中经常会遇到访问文件的情况,因此学习与文件有关的操作对程序开发很有帮助,关于文件操作的一些基本技术,在前面章节中有专门基于C#语言的详细讲解,本节主要介绍如何使用HTML5和JavaScri ...
- js 实现class作为选择器
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- xadmin自定义关联菜单
网上好多自定义xadmin后台数据很少有关怎样设置外键关联菜单的显示,如下图所示: 现有个需求根据model中status字段值,来显示关联菜单三道杠,如上图app状态只有是审核成功才会显示,未审核不 ...
- js小游戏:五子棋
使用纯js的小游戏,五子棋 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- Python Django 之 Template 模板的使用
一.模板样式 注意: 1.url urlpatterns = { path('admin/', admin.site.urls), path('order/', views.order), path( ...
- Fedora防火墙配置
简介: Fedora 18以及之后的版本,防火墙的管理不再基于iptables,而基于firewall的东西.firewall的功能相对复杂一些,可以控制服务,控制端口,设置安全区域,设置端口转发等功 ...
- Linux下使用bind,epoll对网络编程封装
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- Cracking The Coding Interview5.1
//You are given two 32-bit numbers, N and M, and two bit positions, i and j. Write a method to set a ...
- Android: apk反编译 及 AS代码混淆防反编译
一.工具下载: 1.apktool(资源文件获取,如提取出图片文件和布局文件) 反编译apk:apktool d file.apk –o path 回编译apk:apktool b path –o f ...