jqury属性操作,特殊效果
一. 常用属性操作
1、html() 取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');
2、text() 取出或设置text内容
// 取出文本内容
var $htm = $('#div1').text();
// 设置文本内容
$('#div1').text('<span>添加文字</span>');
3、attr() 取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').attr('src');
// 设置图片的地址和alt属性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
4. prop()取出其他值
<input type="checkbox" name="" id="check" checked>多选默认选上
//读
alert($('#check').prop(checked)); 如果选中会弹出true,否则是false
//写
$('check').prop({checked:true});
5. val() 设置或返回匹配元素的值
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(":text").val("Hello jack");
});
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user" value="Hello World" /></p>
<button>改变文本域的值</button>
</body>
</html>
打开网页后文本框默认显示Hello World,如果点击改变文本域的值后,就会显示Hello jack

二. 特殊效果
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> .box{
width:200px;
height:200px;
background-color: gold;
} </style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript"> $(function(){ $('#btn').click(function() { //淡入淡出 //$('.box').fadeToggle(); // 显示和隐藏
//$('.box').toggle(); $('.box').slideToggle(); }); }) </script>
</head>
<body>
<input type="button" name="" value="效果" id="btn">
<div class="box"></div>
</body>
</html>
jqury属性操作,特殊效果的更多相关文章
- jquery——属性操作、特殊效果
1. attr().prop() 取出或者设置某个属性的值 <!DOCTYPE html> <html lang="en"> <head> &l ...
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
- 了解JavaScript 对象的属性操作
提起操作, 很多人都会想到我们学习过程中最经常做的操作, 就是对数据库进行增, 删, 改, 查, 既然提到这个, 那么对于对象的属性操作也不例外, 基本上可以说也是这几个操作. JS中对象的属性标签 ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- jQuery-1.9.1源码分析系列(八) 属性操作
jQuery的属性操作主要包括 jQuery.fn.val jQuery.fn.attr jQuery.fn.removeAttr jQuery.fn.prop jQuery.fn.removePro ...
- jQuery属性操作
jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...
- 利用@property实现可控的属性操作
利用@property实现可控的属性操作 Python中没有访问控制符, 不像java之类的 public class Person{ private int x public int getAge( ...
- js学习笔记2---HTML属性操作
1.HTML属性操作:读.写 属性名 属性值 2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...
- jQuery源代码学习之八——jQuery属性操作模块
一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...
随机推荐
- 10 华电内部文档搜索系统 search01
Lucene解决搜索问题.ibatis实现存放问题,就是解决持久化问题.Struts 2做页面显示,就是实现业务层对应的功能. Spring与ibatis结合, 添加Spring支持 右击项目名s2i ...
- Opencv Shi-Tomasi角点检测
#include <iostream>#include <opencv2/opencv.hpp> using namespace std;using namespace cv; ...
- Redis只作为缓存,不做持久化的配置
#1.配置缓存内存限制和清理策略 #作为缓存服务器,如果不加以限制内存的话,就很有可能出现将整台服务器内存都耗光的情况,可以在redis的配置文件里面设置: #example: # 限定最多使用1.5 ...
- htaccess跨域
目的:为了加快访问速度,减轻主站压力,把静态资源放到独立的服务器上,使用独立的域名 问题:浏览器为安全考虑,实施同源策略:ip/域名和端口必须相同 解决办法: 1.httpd.conf中,开启apac ...
- [GO]单向channel和应用
var ch1 chan int //ch1是一个正常的channel,不是单向的 var ch2 chan <- float64 //ch2是一个单向的channel,只用于写float ...
- element onclick 动态创建元素并绑定onclick事件
<html> <head> <meta charset="UTF-8"> <title>b</title> <sc ...
- 一个简单的编译tex的Makefile
tex编译成pdf通常要经过以下步骤:tex-->dvi-->ps-->pdf.如果修改了tex文件想看一下效果,就要把命令重新敲一遍.虽然就几行命令,反复敲还是很烦人的.最直接的办 ...
- 团体程序设计天梯赛L2-013 红色警报 2017-03-23 22:08 55人阅读 评论(0) 收藏
L2-013. 红色警报 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 战争中保持各个城市间的连通性非常重要.本题要求你编写一 ...
- Linux route命令 显示getnameinfo failed [UNKNOWN]
Redhat配置IPv6以后,执行route显示getnameinfo failed [UNKNOWN] 修改/etc/hosts,增加主机名后,重启服务器,问题解决
- mysql多字段唯一索引
项目中需要用到联合唯一索引: 例如:有以下需求:每个人每一天只有可能产生一条记录:处了程序约定之外,数据库本身也可以设定: 例如:user表中有userID,userName两个字段,如果不希望有2条 ...