一. 常用属性操作

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属性操作，特殊效果的更多相关文章

  1. jquery——属性操作、特殊效果

    1. attr().prop() 取出或者设置某个属性的值 <!DOCTYPE html> <html lang="en"> <head> &l ...

  2. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

  3. 了解JavaScript 对象的属性操作

    提起操作, 很多人都会想到我们学习过程中最经常做的操作, 就是对数据库进行增, 删, 改, 查, 既然提到这个, 那么对于对象的属性操作也不例外, 基本上可以说也是这几个操作. JS中对象的属性标签 ...

  4. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  5. jQuery-1.9.1源码分析系列（八） 属性操作

    jQuery的属性操作主要包括 jQuery.fn.val jQuery.fn.attr jQuery.fn.removeAttr jQuery.fn.prop jQuery.fn.removePro ...

  6. jQuery属性操作

    jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...

  7. 利用@property实现可控的属性操作

    利用@property实现可控的属性操作 Python中没有访问控制符, 不像java之类的 public class Person{ private int x public int getAge( ...

  8. js学习笔记2---HTML属性操作

    1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...

  9. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

随机推荐

  1. Excel VBA入门（二）数组和字典

    数组和字典也是VBA的常用到数据类型之一.但是我翻了有四五本VBA教程相关的书,里面都没有介绍到字典,数组到是在介绍数据类型时有介绍,而并没有提到字典. 事实上,字典不是VBA内置的类型,它是Wind ...

  2. spring4-1-Spring的简单介绍

    Spring4.0 是 Spring 推出的一个重大版本升级,进一步加强了 Sring 作为 Java 领域第一开源平台的地位.Spring4.0 引入了众多 Java 开发者期盼的新特性,如泛型依赖 ...

  3. jQuery autocomplete -默认

    <!doctype html> <html> <head> <meta name="content-type" content=" ...

  4. avalonjs 笔记

    1>复选卡框和单选框 复选卡框 监控已选框的数组,即通过属性监控来判断是否全选 <div ms-controller="test"> <ul> < ...

  5. java之yield(),sleep(),wait()区别详解-备忘笔记[转]

    1.sleep() 使当前线程(即调用该方法的线程)暂停执行一段时间,让其他线程有机会继续执行,但它并不释放对象锁.也就是说如果有synchronized同步快,其他线程仍然不能访问共享数据.注意该方 ...

  6. SSL技术白皮书

    首页产品技术操作系统ComwareV5安全和VPN SSL技术白皮书 下载 收藏 打印 推荐 摘自:http://www.h3c.com/cn/d_200812/622834_30003_0.htm# ...

  7. 4.3.3 thread对性能有何帮助

    public class ThreadLocalDemo { public static final int GE_COUNT = 10000000; public static final int ...

  8. Animator 设置动画效果

    1. 调节预设对象大小适中 2. 设置骨骼,修改关节 3. 拖入预设动作效果对象中 4. 将预设对象拉入场景中,并新建AnimatorController 5. 新建动作或BlendTree,设置参数 ...

  9. servlet及xml文件处理流程

    启动项目----会找到web.xml文件---跳转到默认jsp----页面重定向----转到xml.文件下 通过<servlet-mapping>映射找到<servlet>标签 ...

  10. Alpha冲刺 - （8/10）

    队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 进一步优化代码,结合自己负责的部分修改功能 代码规范完整 ...