jQuery 函数

1.append() 方法在被选元素的结尾插入指定内容。

// 接收字符串选择器

var $box = $("box");
// 给box 中添加段落
var $p = $("<p>段落</p>")；
$box.append($p);

2.使用each ， map 遍历数组

var arr = [1, 3, 5, 7, 9];
$.each(arr, function(index, value){
	document.write(index, value);
});

// 第一个参数：数组名
// 先value， 后index
$.map(arr, function(value, index){
	document.write(index, value);
});

/*
区别：
 1.each 默认返回值就是遍历谁就返回谁
 map的默认返回值是一个空数组
 2.each 不支持在回调函数中对遍历数组进行处理
  map 可以在回调函数中通过return 对遍历的数组进行处理，返回新的函数
*/

3.trim() 函数：从字符串的两端删除空白字符和其他预定义字符。

var str = "     shi  "; 
var res = $.trim(str);
document.write(res);

4.attr()函数， prop（）方法功能一致

// attr();
// 一个参数，是获取属性值，两个参数是修改属性值

$("span").attr("class");   // 获取span 属性的class值

$("span").attr("class", "box"); // 修改span 属性的   如果不存在，则新增

5.addClass(), removeClass(), toggleClass()

// addClass()
$("div").addClass("class1") // 添加类名。添加多个，空格隔开
$("div").removeClass("class1") // 删除类名
$("div").toggleClass("class1") // 切换类类名

6.操作 HTML 代码的方法

// html
$("div").html("<p>我是段落</p>");  // 设置
$("div").html();                  // 获取

// text
$("div").text("<p>我是段落</p>");  // 设置
$("div").text();                  // 获取

// value
$("div").val("请输入内容");        // 设置
$("div").val();                   // 获取

7.操作 CSS 样式方法

$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "red");

// 另一种写法
$("div").css({
	width: "100px",
	height: "100px",
	background: "red"
});

// 获取css样式值
$("div").css("width");

8.操作尺寸

// 获取元素宽度
$(".father").width();

// 设置元素宽度
$(".father").width("500px");

9.绑定事件操作

// 绑定事件方式
$("button").click(function(){   // 回调函数
	alert("hello");
});

// 调用函数传参 执行
function test(){
	alert("ok");
}
$("button").click(test);

// off方法  移除事件

10.事件冒泡，（当子标签响应之后父标签也响应）

$(".son").click(function( event ){
	alert("son");
	event.stopPropagation();   // 关闭方法
});
$(".father").click(function(){
	alert("father");
});

11.事件自动触发

$(".sonr").trigger("click"); // 自动触发, .son 的 click 事件  会触发事件冒泡和默认行为 
$(".son").triggerHandler("click");  // 不会触发事件冒泡和默认行为

12. 自定义事件

// 想要自定义事件，必须满足两个条件
// 1. 事件必须是通过 on 绑定
// 2. 事件必须通过 trigger 来触发
$(".son").on("myClick", function(){
	alert("ok");
});
$(".son").trigger("myClick");

13. 事件命名空间

14. 事件委托 delegate()

$("ul").delegate("li", "click", function(){
	document.write($(this).html);
});

15. 移入移出事件

// 常用  父元素与子元素无关
$(".father").mouseenter(function(){
	document.write("移入");
});
$(".father").mouseleave(function(){
	document.write("移出");
});
// 与mouseenter , mouseleave 相同
$(".father").hover(function(){
	document.write("移入");
},function(){
	document.write("移出");
});

// 不常用
$(".father").mouseover(function(){
	document.write("移入");
});
$(".father").mouseout(function(){
	document.write("移出");
});

16. 显示和隐藏方法

$("button").show(1000, function(){          // 参数为时间， 单位ms
	alert("hello");                         // 参数为 回调函数， 动画完之后执行
});  
$("button").hide(1000);
$("button").toggle(1000);

17. 展开收起动画

$("button").eq(0).click(function(){
	$("div").slideDown(1000);     // 展开，第二个参数可以加回调函数
});
$("button").eq(0).click(function(){
	div.stop();                 //   先停止动画
    $("div").slideUp(1000);     // 收起
    
});
$("button").eq(0).click(function(){
	$("div").slideToggle(1000);     // 切换
});

18. 淡入浅出动画

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

        $( "#realname" ).blur(function(){
            var name = $( "#realname" ).val();
            if(name.length <2 || name.length>8)
                $( "#realname2" ).html("<span style=\"color:red;\">姓名为2-4个汉字</span>");
            else if(name.match(/[^\u4e00-\u9fa5]/g))
                $( "#realname2" ).html("<span style=\"color:red;\">姓名为汉字</span>");
            else {
                $( "#realname2" ).html("<span style=\"color:green;\">姓名匹配正确</span>");
            }
        });

猜你喜欢