JQuery学习之操作html/css

JQuery 操作HTML DOM

1.获取
text() – 设置或者返回所选dom的文本内容
html() – 设置或返回所选dom的包含html标记的内容
val() – 设置或者返回表单字段的值,用来操作表单元素
attr() – 显示某一个属性的值,如 $(“#idd”).attr(“id”) 将获取id=‘idd’的dom的id值,既idd

2.设置

eg:
$(“#eg1”).text(“hello world”); //将eg1的内容改为hello world
$(“#eg2”).html(“hello world”); //将eg2的内容改为加粗的hello world
$(“#pagelink”).attr(“href”,”http://www.un1q.me”); //将pagelink的链接改为http://www.un1q.me

2.1 回调函数

text(),html(),val(),attr()同样拥有回调函数,由两个参数组成,被选元素列表中当前元素的下标,以及原始值,然后以函数新值返回希望所使用的字符串。

eg:
$(document).ready(function(){
$(“#btn1”).click(function(){
$(“#test1”).text(function(i,origText){
return “Old text: ” + origText + ” New text: Hello world! (index: ” + i + “)”;
});
});

$(“#btn2”).click(function(){
$(“#test2”).html(function(i,origText){
return “Old html: ” + origText + ” New html: Hello world! (index: ” + i + “)”;
});
});
});

3.添加
append() – 在被选元素的结尾插入内容
prepend() – 在被选元素的开头插入内容
after() – 在被选元素之后插入内容
before() – 在被选元素之前插入内容
ps:前俩是在元素内,后俩是元素外,都可以接受无限的元素
eg:$(“img”).afer(txt1,txt2,txt3,txt4,txt5…….);

4.删除
前面提了添加,那么与之对应的就是删除了。
jquery中提供了两种常用的方法:
remove() – 删除被选元素及其子元素
empty() – 从被选元素中清空子元素
*过滤被删除的元素 $(“p”).remove(“.italic”); 删除class=italic的

元素。

JQuery 操作css

1.基本操作
addClass() -向被选元素添加一个或多个类
removeClass() -从被选元素删除一个或多个类
toggleClass() – 对被选元素进行添加/删除类的切换操作
css() – 设置或返回样式属性
eg:$(“p”).addClass(“important”); //假设有个类叫important
$(“p”).removeClass(“italic”); //假设p本有一个属性类italic
$(“p”).toggleClass(“italic”); //切换class

JQuery – css() 方法

css(“propert name”) – 返回对应属性的值
eg: $(“p”).css(“background-color”);-将返回背景颜色的值
css(“propertname”,”value”);-设置css对应属性的值
$(“p”).css(“background-color”,“red”); -设置背景颜色为红色,也可用6位十六进制表示rgb值
设置多个css属性

css(“propertname”:”value”,“propertname”:”value”,“propertname”:”value”…);

JQuery – 处理尺寸

width()
height()
– 设置或者返回元素的宽度、高度(不包括内边距、边框、外边距)
eg: $(“#div1”).width(); $(“#div1”).height();

innerWidth()
innerHeight()
– 设置或者返回元素的宽度、高度(包括内边距,不含边框、外边距)

outerWidth()
outerHeight()
– 设置或者返回元素的宽度、高度(包括内边距和边框)

outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。

ps: 这里顺便谈下对margin,border,padding的理解,很容易搞混
padding – 内边距,内部填充
border – 边框
margin – 外边距,框与框之间的距离

other: $(document).width(),$(window).width将返回html文档和窗口的大小

JQuery学习笔记之效果

选择器说明:

“#idname” 针对于id的查找  “#hide” 定位id=hide的对象
“.classname”  针对class的查找  “.headerpart” 定位class=headerpar的对象
“tagtype” 对标签可以进行直接查找  “p” 定位所有p标签

显示/隐藏效果

$(“p”).hide()
$(“p”).show()
$(“p”).toggle()
 

进入/退出/变淡效果

$(“p”).fadeIn(speed,callback)
$(“p”).fadeOut(speed,callback)
$(“p”).fadeToggle(speed,,callback)
$(“p”).fadeTo(speed,opacity,callback) //变为透明度为多少的原图
 

滑动效果

$(“p”).slideUp(speed,callback)
$(“p”).slideDown(speed,callback)
$(“p”).slideToggle(speed,,callback)
 

动画

 

$(“selector”).animate({params},speed,callback)
eg: $(“#photo1”).animate({left:250px;}); 将id名为photo1的图片移至left:250px处.
Ps:所有的html元素默认情况下都是静态的,如果要做以上操作,请在css属性中注明 position:abosulte/fixed/relative;
 

使用animate改变css属性样式时要注意只能使用camel写法。比如使用margin-Right.
 

使用颜色动画要下载jquery color animations插件
 

可以使用队列方式来加载多个动画,将会一一执行
function(){
div=$(“div”); //定位标签div
div.animate({left:’100px’,top:’100px’}); //执行动画
div.animate({fontSize:’3em’});
div.hide();
}
 

停止动画

$(“selector”).stop(stopAll,goToEnd);
stop(); //默认两个都false,效果是停止当前动画,如果我是以一个队列执行,则会执行队列中的下一个动画。
stop(true); //停在当前,删除所有队列中的动画
stop(true,true); //停止当前动作,直接跳到当前动画的最后样式。
 

关于callback:

之前很多函数里面放了callback这个参数,这里统一解释一下,callback是一个回调函数,当动画或者函数完成100%时会调用callback。这是因为js是一个脚本语言,是逐一执行的,动画执行有时间,在动画之后的语句很可能在动画没完成之前执行从而产生错误,如果遇到这种情况,就需要将后面执行的语句放到$(“selector”).animate(speed,callback)中的callback以function()方式放入。
 

Jquery-chaining

 
Jquery允许我们在一条语句上使用多个jquery方法(相同元素上)。
 
Eg:$(“p”).css(“color”,”red”).hide(“1000”).show(“1000”);

如何在新浪sae上通过wordpress搭建blog

今天就是在SAE上通过Wordpress搭建的,中间走了一些弯路,在这里给一个我最后成功的流程,有兴趣的同学可以参考:

(Wp链接:Wp下载地址

1.下载后解压将根目录中wp-config-sample改为wp-config.可复制我以下内容更改整个wp-config,确认能正确链接MySQL,代码如下:

<?php
/**
* WordPress 基础配置文件。
*
* 本文件包含以下配置选项: MySQL 设置、数据库表名前缀、
* 密匙、WordPress 语言设定以及 ABSPATH。如需更多信息,请访问
* {@link http://codex.wordpress.org/Editing_wp-config.php 编辑
* wp-config.php} Codex 页面。MySQL 设置具体信息请咨询您的空间提供商。
*
* 这个文件用在于安装程序自动生成 wp-config.php 配置文件,
* 您可以手动复制这个文件,并重命名为 wp-config.php,然后输入相关信息。
*
* @Author Qing Zhu <chingju1992@hotmail.com>
* @package WordPress
*/

// ** MySQL 设置 – 具体信息来自您正在使用的主机 ** //
/** WordPress 数据库的名称 */
define(‘DB_NAME’, SAE_MYSQL_DB);

/** MySQL 数据库用户名 */
define(‘DB_USER’, SAE_MYSQL_USER);

/** MySQL 数据库密码 */
define(‘DB_PASSWORD’, SAE_MYSQL_PASS);

/** MySQL 主机 */
define(‘DB_HOST’, SAE_MYSQL_HOST_M.’:’.SAE_MYSQL_PORT);

/** 创建数据表时默认的文字编码 */
define(‘DB_CHARSET’, ‘utf8’);

/** 数据库整理类型。如不确定请勿更改 */
define(‘DB_COLLATE’, ”);

define(‘WP_USE_MULTIPLE_DB’, true);

$db_list = array(
‘write’=> array(
array(
‘db_host’ => SAE_MYSQL_HOST_M.’:’.SAE_MYSQL_PORT,
‘db_user’=> SAE_MYSQL_USER,
‘db_password’=> SAE_MYSQL_PASS,
‘db_name’=> SAE_MYSQL_DB,
‘db_charset’=> ‘utf8’
)
),
‘read’=> array(
array(
‘db_host’ => SAE_MYSQL_HOST_S.’:’.SAE_MYSQL_PORT,
‘db_user’=> SAE_MYSQL_USER,
‘db_password’=> SAE_MYSQL_PASS,
‘db_name’=> SAE_MYSQL_DB,
‘db_charset’=> ‘utf8’
)
),
);
$global_db_list = $db_list[‘write’];

/**#@+
* 身份密匙设定。
*
* 您可以随意写一些字符
* 或者直接访问 {@link https://api.wordpress.org/secret-key/1.1/salt/ WordPress.org 私钥生成服务},
* 任何修改都会导致 cookie 失效,所有用户必须重新登录。
*
* @since 2.6.0
*/
define(‘AUTH_KEY’, hash_hmac(‘sha1’, SAE_ACCESSKEY . ‘AUTH_KEY’, SAE_SECRETKEY ));
define(‘SECURE_AUTH_KEY’, hash_hmac(‘sha1’, SAE_ACCESSKEY . ‘SECURE_AUTH_KEY’, SAE_SECRETKEY ));
define(‘LOGGED_IN_KEY’, hash_hmac(‘sha1’, SAE_ACCESSKEY . ‘LOGGED_IN_KEY’, SAE_SECRETKEY ));
define(‘NONCE_KEY’, hash_hmac(‘sha1’, SAE_ACCESSKEY . ‘NONCE_KEY’, SAE_SECRETKEY ));
define(‘AUTH_SALT’, hash_hmac(‘sha1’, SAE_ACCESSKEY . ‘AUTH_SALT’, SAE_SECRETKEY ));
define(‘SECURE_AUTH_SALT’, hash_hmac(‘sha1’, SAE_ACCESSKEY . ‘SECURE_AUTH_SALT’, SAE_SECRETKEY ));
define(‘LOGGED_IN_SALT’, hash_hmac(‘sha1’, SAE_ACCESSKEY . ‘LOGGED_IN_SALT’, SAE_SECRETKEY ));
define(‘NONCE_SALT’, hash_hmac(‘sha1’, SAE_ACCESSKEY . ‘NONCE_SALT’, SAE_SECRETKEY ));

/**#@-*/

/**
* WordPress 数据表前缀。
*
* 如果您有在同一数据库内安装多个 WordPress 的需求,请为每个 WordPress 设置不同的数据表前缀。
* 前缀名只能为数字、字母加下划线。
*/
$table_prefix = ‘wp_’;

/**
* WordPress 语言设置,默认为英语。
*
* 本项设定能够让 WordPress 显示您需要的语言。
* wp-content/languages 内应放置同名的 .mo 语言文件。
* 要使用 WordPress 简体中文界面,只需填入 zh_CN。
*/
define (‘WPLANG’, ‘zh_CN’);

/**
* 开发者专用:WordPress 调试模式。
*
* 将这个值改为“true”,WordPress 将显示所有开发过程中的提示。
* 强烈建议插件开发者在开发环境中启用本功能。
*/
define(‘WP_DEBUG’, false);

/* 好了!请不要再继续编辑。请保存该文件。 */

/** WordPress 目录的绝对路径。 */
if ( !defined(‘ABSPATH’) )
define(‘ABSPATH’, dirname(__FILE__) . ‘/’);

/** 设置 WordPress 变量和包含文件。 */
require_once(ABSPATH . ‘wp-settings.php’);

2.在sae-storage中开一个新的域,可叫wordpress.

3.初始化sae-mysql

4.进入sae主页,初次会跳转至配置界面.

5.Done

希望能对像我一样的初学者有帮助!