JQuery笔记

").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);

jQuery内部使用innerHTML创建元素:
$("").appendTo(testDiv);


3.在页面加载完毕后:
$(document).ready(调用的函数); 可简写为 $(function(){ ... });

后者支持多个函数
$(function(){alert("第1个函数");}); $(function(){alert("第2个函数");});
使用$()将我们的函数包装起来即可. 而且可以在一个页面绑定多个函数, 如果使用传统的window.onload则只能调用一个函数

4.操作元素属性
$("img").attr("src"); //返回图像的src属性值
$("img").attr({ src: "test.jpg", alt: "Test Image" }); //为所有图像设置src和alt属性
$("img").attr("src","test.jpg"); //为所有图像设置src属性
$(

"img").attr("title", function() { return this.src }); //设置图像的title属性为src属性值
$("img").removeAttr("src"); //将文档中图像的src属性删除

其他常用属性
$("p").height(); //获取第一段的高, 宽用 $("p").width();
$("p").height(20); //把所有段落的高设为 20，宽用$("p").width(20);


5.修改css样式
$("p").addClass("selected"); //为匹配的元素加上 'selected' 类
$("p").removeClass("selected"); //从匹配的元素中删除 'selected' 类
$("p").toggleClass("selected"); //为匹配的元素切换 'selected' 类

$("p").css("color"); //取得第一个段落的color样式属性的值
$("p").css({ color: "#ff0011", background: "blue" }); //将所有段落的字体颜色设为红色并且背景为蓝色
$("p").css("color","red"); //将所有段落字体设为红色



应用举例:
$("#btnAdd").bind("click", function(event) { $("p").addClass("colorRed borderBlue"); });
$("p").removeClass();

6.事件和事件对象
$("#testDiv4").bind("click", showMsg); //多次绑定不会覆盖
$("#testDiv4").one("click", showMsg); //第一次点击时触发
$("p").unbind() //把所有段落的所有事件取消绑定
$("p").unbind( "click" ) //将段落的click事件取消绑定
$("p").click( function (event, a, b) { ..... } ).trigger("click", ["foo", "bar"]);
//给一个事件传递参数
// 一个普通的点击事件时，a和b是undefined类型
// 如果用下面的语句触发，那么a指向"foo",而b指向"bar"

给按钮传递参数，举例

如: $("#abs").bind("click",{myname:"chenda"},function(event) {alert(event.data.myname);});
又如: $("#abs").bind("click", function(event) { alert($(event.target).attr("src")); });

说明：event.type得到事件类型如"click", event.target得到事件触发者DOM对象
event.data得到事件传入的参数, event.result得到上一个事件处理函数返回的值

事件汇总:
blur( ),blur(fn),change( ),change(fn),click( ),click(fn),dblclick( ),dblclick(fn),error( ),error(fn),
focus( ),focus(fn),keydown( ),keydown(fn),keypress( ),keypress(fn),keyup( ),keyup(fn),load(fn),
mousedown(fn),mouseenter(fn),mouseleave(fn),mousemove(fn),mouseout(fn),mouseover(fn),mouseup(fn),
resize(fn),scroll(fn),select( ),select(fn),submit( ),submit(fn),unload(fn)

7.hover(over, out) 当鼠标移动到上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
$("td").hover( function () { },function () { } ); 或 $("td").hover(fn1,fn2);

8.toggle(fn, fn2, [fn3, fn4, ...]) 每次点击后依次调用函数

9.Ajax部分
载入远程 HTML 文件代码并插入至 DOM 中： $("#demo").load("https://www.sodocs.net/doc/7016854277.html,");
可以指定选择符，来筛选载入的HTML文档，DOM中将仅插入筛选出的HTML代码：$("#demo").load("https://www.sodocs.net/doc/7016854277.html, #u");

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式
a. 以 POST 形式发送附加参数并在成功时显示信息 load(url, [data], [callback])
$("#feeds").load("feeds.php", {limit: 25}, function(){...});

$.get(url, [data], [callback], [type])
$.post(url, [data], [callback], [type])
$.getScript(url, [callback])


$.get("check.asp?uid=chenda");
$.get("check.asp", { "uid": "chenda" });
$.getScript("test.js");
$.getScript("test.js", function(){....});

10.jQuery动画效果
$("p").show(speed, [callback]) //speed值:"slow", "normal","fast",4000(4秒),以优雅的动画显示
$("p").hide(speed, [callback]) //speed值:"slow", "normal","fast",4000(4秒),以优雅的动画隐藏
$("p").toggle(speed, [callback] ); //以优雅的动画切换显示状态(隐藏或可见)

无过渡动画版:$("p").toggle(); $("p").show(); $("p").hide();

11. 滑动动画函数 Sliding
$("p").slideDown("slow"); //用600毫秒缓慢的将段落滑下
$("p").slideUp("slow"); //用600毫秒缓慢的将段落滑上
$("p").slideToggle("slow"); //用600毫秒缓慢的将段落滑上或滑下
淡入淡出函数 Fading
$("p").fadeIn("slow"); //用600毫秒缓慢的将段落淡入
$("p").fadeOut("slow"); //用600毫秒缓慢的将段落淡出
$("p").fadeTo("slow", 0.66); //用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度
说明:fadeTo函数只改变对象的透明度, 即使透明度为0对象仍然占位. 而fadeIn和fadeOut后不占位

12. 数组和对象操作
$.each(object, [callback]); //遍历数组或对象
如:$("img").each(function(i){ this.src = "test" + i + ".jpg"; });

$.jQuery.grep(array, callback, [invert]) //过滤数组元素，返回数组
如: $.grep( [0,1,2], function(n,i){ return n > 0;}); //返回: [1, 2]
$.grep( [0,1,2], function(n,i){ return n > 0;}, true); //返回: [0]

$.map( [0,1,2], function(n){ return n + 4;}); 返回:[4, 5, 6] //转换数组，返回数组
$.map( [0,1,2], function(n){ return n > 0 ? n + 1 : null;}); //于 0 的元素加 1 ，否则删除,返回[2, 3]
$.map( [0,1,2], function(n){ return [ n, n + 1 ];}); //返回：[0, 1, 1, 2, 2, 3]
//原数组中每个元素扩展为一个包含其本身和其值加 1 的数组

//转换为数组
jQuery.makeArray(obj) : 将类数组对象转换为数组对象
如：var arr = jQuery.makeArray(document.getElementsByTagName("div"));

//查找数组
jQuery.inArray( value, array ) : 查找元素是否在数组中，第一个为0，找不到为-1。

//合并数组
$.merge( [0,1,2], [2,3,4] )

//其他
jQuery.trim( str ) //去空格
var params = { width:1680, height:1050 }; var str = jQuery.param(params); //返回: width=1680&height=1050

0. 扩展jQuery对象
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});

调用：jQuery.min(2,3); // => 2 ; jQuery.max(4,5); // => 5



//==================================jQuery应用===============================
1.为没有alt属性的标签，添加alt属性
$("img").not("img[alt]").attr("alt","alt值");

2.隔行换色
$("#tbl tr:even").each(function() {this.style.background='#FFFFFF';});
$("#tbl tr:odd").each(function() {this.style.background='#E8EEF2';});

3.显示和隐藏弹出层(渐变动画效果)
js:


HTML:
显示文字