一. 常用属性操作

1、html() 取出或设置html内容

  1. // 取出html内容
  2.  
  3. var $htm = $('#div1').html();
  4.  
  5. // 设置html内容
  6.  
  7. $('#div1').html('<span>添加文字</span>');

　　

2、text() 取出或设置text内容

  1. // 取出文本内容
  2.  
  3. var $htm = $('#div1').text();
  4.  
  5. // 设置文本内容
  6.  
  7. $('#div1').text('<span>添加文字</span>');

　　

　　

3、attr() 取出或设置某个属性的值

  1. // 取出图片的地址
  2.  
  3. var $src = $('#img1').attr('src');
  4.  
  5. // 设置图片的地址和alt属性
  6.  
  7. $('#img1').attr({ src: "test.jpg", alt: "Test Image" });

　　

4. prop()取出其他值

  1. <input type="checkbox" name="" id="check" checked>多选默认选上
  2. //读
  3. alert($('#check').prop(checked)); 如果选中会弹出true，否则是false
  4. //写
  5. $('check').prop({checked:true});

　

5. val()  设置或返回匹配元素的值

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $("button").click(function(){
  7.     $(":text").val("Hello jack");
  8.   });
  9. });
  10. </script>
  11. </head>
  12. <body>
  13. <p>Name: <input type="text" name="user" value="Hello World" /></p>
  14. <button>改变文本域的值</button>
  15. </body>
  16. </html>　

　

打开网页后文本框默认显示Hello World，如果点击改变文本域的值后，就会显示Hello jack

二. 特殊效果

  1. fadeOut() 淡出
  2. fadeToggle() 切换淡入淡出
  3. hide() 隐藏元素
  4. show() 显示元素
  5. toggle() 依次展示或隐藏某个元素
  6. slideDown() 向下展开
  7. slideUp() 向上卷起
  8. slideToggle() 依次展开或卷起某个元素
  10. 例子
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style type="text/css">
  7.  
  8. 		.box{
  9. 			width:200px;
  10. 			height:200px;
  11. 			background-color: gold;
  12. 		}
  13.  
  14. 	</style>
  15. 	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  16. 	<script type="text/javascript">
  17.  
  18. 		$(function(){
  19.  
  20. 			$('#btn').click(function() {
  21.  
  22. 				//淡入淡出
  23.  
  24. 				//$('.box').fadeToggle();
  25.  
  26. 				// 显示和隐藏
  27. 				//$('.box').toggle();
  28.  
  29. 				$('.box').slideToggle();
  30.  
  31. 			});
  32.  
  33. 		})
  34.  
  35. 	</script>
  36. </head>
  37. <body>
  38. 	<input type="button" name="" value="效果" id="btn">
  39. 	<div class="box"></div>
  40. </body>
  41. </html>

　　

  1.  

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

    [gvim] 1.gvim的配置文件在安装目录下,文件名为_vimrc. 2.通过以下命令选择配色方案:

  2. 【UVA11419 训练指南】我是SAM 【二分图最小覆盖，最小割】

    题意 给出一个R*C大小的网格,网格上面放了一些目标.可以在网格外发射子弹,子弹会沿着垂直或者水平方向飞行,并且打掉飞行路径上的所有目标.你的任务是计算最少需要多少子弹,各从哪些位置发射,才能把所有目 ...

  3. 3-为什么很多 对 1e9+7(100000007)取模

    首先有很多题目的答案是很大的,然而出题人的本意也不是让选手写高精度或者Java,所以势必要让答案落在整型的范围内.那么怎么做到这一点呢,对一个很大的质数取模即可(自行思考为什么不是小数).那么如果您学 ...

  4. Python遍历一个文件夹下有几个Excel文件及每个Excel文件有几个Sheet

    一. 解决问题: 工作中常会遇到合并Excel文件的需求,Excel文件数量不确定,里面的Sheet 数量是可变的,Sheet Name是可变的,所以,需要用到遍历一个文件夹下有几个Excel文件,判 ...

  5. windows下 apache,php,mysql，phpadmin集成化安装

    1.appserv 直接下载安装, 2.linux环境下下载安装LAMP

  6. a Concise Sparse Matrix package

    简明稀疏矩阵包 https://github.com/kulhanek/csparse https://github.com/kulhanek/csparse

  7. linux查看操作系统版本信息

    linux查看操作系统版本信息  摘自:https://www.cnblogs.com/vaelailai/p/7545166.html 一.linux下如何查看已安装的centos版本信息: 1.L ...

  8. sql insert、update、delete完以后返回主键ID

    以前只用过在insert完以后利用select @@IDENTITY返回主键ID,最近在做微信公众平台,遇到一个需求是在帮绑定万微信openid后自动完成登陆,这就需要update以后返回主键ID,查 ...

  9. Ajax之XMLHttpRequest

    XMLHttpRequest对象 XMLHttpRequest  提供客户端同http服务器通讯的协议 一:创建 IE : http_request = new ActiveXObject(" ...

  10. Hadoop Shell

    1.常用的一些Shell 再好的博客,都不如官方文档好用: http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html