1 jQuery的样式操作

对元素样式的设置和获取样式值。

[1]CSS() 设置或返回匹配元素的样式属性。

和Attr一致，当传递一个参数(样式属性名称)时，就获取样式属性值。传递多个或者一个{key:value….}类型的参数时，就是设置样式属性。

S1:案例：获取一个元素的样式属性值

S1:设置一元素的一个样式属性

S3:同时设置多个样式属性

[2]height()和width()操作元素的宽高

Height

height() 方法返回或设置匹配元素的高度。

如果不为该方法设置参数，则返回以像素计的匹配元素的高度。

案例：

Width

width() 方法返回或设置匹配元素的宽度。

如果不为该方法设置参数，则返回以像素计的匹配元素的宽度。

案例：

通过css(“width”) 同样可以获取元素的宽度或者高度。但是获取的数据是有单位的。而通过专门的height和width获取的数据时没有单位的方便运算。

[3]offset() 设置获取元素位置

offset() 方法返回或设置匹配元素相对于文档的偏移。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

案例：

offsetParent() 方法返回最近的祖先定位元素。

[4]postion()获取元素相对于父容器的偏移量

position() 方法返回匹配元素相对于父元素的位置（偏移）。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。

此方法只对可见元素有效。

案例：

[5]scrollTop和scrollLeft设置或获取滚动条的偏移量

scrollTop

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移

案例：

scrollLeft

scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。

scroll left offset 指的是滚动条相对于其左侧的偏移。

如果该方法未设置参数，则返回以像素计的相对滚动条左侧的偏移。

案例：

2 jQuery的文档操作

[1]使用jQuery创建一个元素

DOM元素和jQuery的相互转换:

DOMàjQuery: $(“domElement”)。

jQueryàDOM: jqObj[index]

$(“<div></div>”)；

[2]将元素追加（添加到页面中）

(1) append() 向匹配的元素内部追加内容。

append() 方法在被选元素的结尾（仍然在内部）插入指定内容.

案例1：追加创建的新元素

将现有的元素追缴到元素内部

(2) appendTo() 向匹配的元素内部追加内容

案例：将按钮btn1追加到p的后面。

(3)使用befor和after在匹配元素的之前和之后出入元素

案例：

[4]使用insertBefore和insertAfter将指定的元素插入到匹配的元素的前后

案例：

(4)使用empty和remove清空和删除元素

清空元素内容

从效果看，empty纯粹的只是将标签的内容移除到标签的外面。

Remove方法删除元素

将元素删除，将内部的内容移除到元素外面。

(5)其他文档操作的API

clone() 创建匹配元素集合的副本。

detach() 从 DOM 中移除匹配元素集合。

prepend() 向每个匹配的元素内部前置内容。

prependTo() 向每个匹配的元素内部前置内容。

replaceAll() 用匹配的元素替换所有匹配到的元素。

replaceWith() 用新内容替换匹配的元素。

text() 设置或返回匹配元素的内容

unwrap() 移除并替换指定元素的父元素。

wrap() 把匹配的元素用指定的内容或元素包裹起来。

wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。

wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

[3]级联操作

使用jQuery实现一个简单省市级联。

<!DOCTYPE html>

<html>

<head>

var ps = new Array();

ps["江苏省"] = ["南京","苏州","无锡","常州","盐城"];

ps["安徽省"] = ["合肥","宣城","芜湖","淮北","亳州"];

ps["浙江省"] = ["杭州","嘉兴","湖州","宁波","绍兴"];

$(document).ready(function(){

var p = $("#p");

p.append("<option value='-1'>请选择省份</option>");

for(var s in ps){

p.append("<option value='"+s+"'>"+s+"</option>");

}

});

function showCity(){

//先清空城市的选项

$("#c").empty();

var p = $("#p").val();

console.log(p);

if(p==-1){

}else{

//找出城市的数组

var cs = ps[p];

console.log(cs);

for(var i = 0;i<cs.length;i++){

$("#c").append("<option value='"+cs[i]+"'>"+cs[i]+"</option>");

}

</script>

</head>

<body>

省<select onchange="showCity()" id="p"></select>

市<select id="c"></select>

</body>

</html>

3 jQuery的事件操作

jQuery动态给元素绑定和解绑事件。

[1]ready事件

当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法

案例：

$(document).ready(function(){

$(".btn1").click(function(){

$("p").slideToggle();

});

[2]点击事件

单击 click

双击 dbclick

jQuery不太喜欢”on”,所以jQuery操作事件时都是没有on的。

案例：绑定事件

Shijiajiebang

激发事件：

当同时给一个元素绑定两个单击事件时，都会成功

Dbclick和click操作是完全一致的。

[4]失去焦点的事件

当元素失去焦点时发生 blur 事件。

blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码

案例：

[5]其他事件

change() 触发、或将函数绑定到指定元素的 change 事件

focus() 触发、或将函数绑定到指定元素的 focus 事件

keydown() 触发、或将函数绑定到指定元素的 key down 事件

keypress() 触发、或将函数绑定到指定元素的 key press 事件

keyup() 触发、或将函数绑定到指定元素的 key up 事件

mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件

mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件

mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件

mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件

mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件

mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件

mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件

resize() 触发、或将函数绑定到指定元素的 resize 事件

scroll() 触发、或将函数绑定到指定元素的 scroll 事件

select() 触发、或将函数绑定到指定元素的 select 事件

submit() 触发、或将函数绑定到指定元素的 submit 事

[5]事件的绑定和解绑

(1) $(selector).bind(event) 向匹配元素添加一个或更多事件处理器

案例：通过bind绑定一个事件。

$(selector).bind(event,function(){}); 这里的event不能有on

通过bind同时绑定多个事件：

$(selector).bind({event:function(){},…..}); 这里的event不能有on

使用unbind解绑一个事件

$(selector).unbind(event);

如果unbind什么参数都不传，就是解绑所有的事件

4 jQuery的动画

1.show/hide

function kai(){

/**

* 不传递参数，就没有动画。

* slow 慢一点

* fast 快一点

* 具体的数字就是动画的耗时(毫秒)

$("#d1").show(2000);

}

function harvest(){

$("#d1").hide(3000);

}

toggle() 方法切换元素的可见状态。

function isHide(){

$("#d1").toggle(1000);

}

2.Slide 滑动效果

$("#d1").slideDown(); 向下打开

$("#d1").slideUp(); 向上收入

$("#d1").slideToggle(1000); 切换状态

3.Fade in / out 淡入淡出

$("#d1").fadeIn() 逐渐显示

$("#d1").fadeOut() 主键隐藏

$("#d1").fadeTo(1000,0.4); 改变透明度

Tips:这些函数都有回调函数

案例：

回调函数的作用是：当动画执行完成之后要执行的代码。

4.自定义动画

animate() 方法通过使用 CSS 样式，把元素从一种状态改变为另一种状态。

5使用jQuery实现的一些特效

5.1 动态的渲染一个窗体

/*动态渲染一个窗体*/

/**

* [win 动态生成一个窗体]

* @param {[object]} [{width:600,height:800,title:"用户管理",icon:"imags/icon.png"}]

* @param {[type]} [contentHtml] [要填充到baody中的内容]

* @return {[type]} [一个窗体元素 DOM]

function win(wobj,contentHtml){

var width = 500;

var height = 500;

var title = "极客营";

var left = 200;

var top = 100;

var icon = undefined;

if(wobj){ //初始化窗体参数

if(wobj.width){

width = wobj.width;

}

if(wobj.height){

height = wobj.height;

}

if(wobj.title){

title = wobj.title;

}

if(wobj.icon){

icon = wobj.icon;

}

if(wobj.left){

left = wobj.left;

}

if(wobj.top){

top = wobj.top;

alert(top);

}

var win ;//申明窗体对象

//开始创建

win = $("<div id='d1'></div>");

var top = $("<div></div>");

var body = $("<div></div>");

//设置样式

win.css({"width":width+"px","height":height+"px","background":"#eee","border":"1px solid #ccc","position":"absolute","left": left+"px","top": top +"px"});

//设置top的样式

top.css({"width":width+"px","height":"25px","background":"#ccc","border-width":"0px 0px 1px 0px","border-style":"solid","font":"18px 黑体"});

//添加标题内容

top.text(title);

//将top加入窗体

win.append(top);

//设置内容

body.css({"width":width+"px","overflow":"auto","height":(height-25-2)+"px"});

//给body添加内容

body.html(contentHtml);

//将body加入窗体

win.append(body);

//完善窗体的拖动事件

//定义鼠标的坐标

var mx = undefined;

var my = undefined;

//给top添加鼠标按下的事件

top.bind("mousedown",function(){

//记录鼠标的坐标

mx = event.x;

my = event.y;

//同时给整个窗体添加鼠标移动的事件

$("body").bind("mousemove",function(){

//获取鼠标当前的位置

var nx = event.x;

var ny = event.y;

//根据鼠标的移动量修改窗体当前的位置

//获取窗体当前的位置

var windOffset = win.offset();

var nleft = windOffset.left;

var ntop = windOffset.top;

//修改窗体的当前的位置

win.offset({left:nleft+(nx-mx),top:ntop+(ny-my)});

//再次重新记录鼠标的当前位置

mx = nx;

my = ny;

});

//给top添加鼠标松开的事件

top.bind("mouseup",function(){

//移除窗体的鼠标移动事件

$("body").unbind("mousemove");

});

return win;

}

使用：

var w = win({title:"用户列表",width:800},$("#userList").html());

$("body").append(w);

效果：

Jquery(二)

1 jQuery的样式操作

[1]CSS() 设置或返回匹配元素的样式属性。

[2]height()和width()操作元素的宽高

[3]offset() 设置获取元素位置

[4]postion()获取元素相对于父容器的偏移量

[5]scrollTop和scrollLeft设置或获取滚动条的偏移量

2 jQuery的文档操作

[1]使用jQuery创建一个元素

[2]将元素追加（添加到页面中）

[3]级联操作

3 jQuery的事件操作

[1]ready事件

[2]点击事件

[4]失去焦点的事件

[5]其他事件

[5]事件的绑定和解绑

4 jQuery的动画

5使用jQuery实现的一些特效

5.1 动态的渲染一个窗体

猜你喜欢