好久之前学的,没有复习,都忘了,感觉vue.js好用 (/邪笑)

...

jQuery

write Less, Do More

什么是jQuery

js的一个框架,本质上仍然是js

jQuery的特点

• 支持各种主流的浏览器
• 使用特别简单
• 拥有便捷的插件扩展机制和丰富的插件

使用jQuery

jQuery的封装原理

...

jQuery的选择器

//id选择器
function testId(){
	//jQuery--id
    var inp=$("#uname");
    alert(inp.val());
}
//标签选择器
function testEle(){
    var inps=$("input");
    alert(inps.length);
}
//类选择器
function testClass(){
    var inps=$(".common");
    alert(inps.length);
}
//组合选择器
function testAll(){
    var eles=$("h3,input");
    alert(eles.length);
}
//测试子选择器
function testChild(){
    var inps=$("div>input");
    alert(inps.length);
}
//测试层级选择器
function testCj(){
    var inp=$("input:first");
    alert(inp.val());
}
function testCj2(){
    var inp=$("td:not(td[width])");
    alert(inp.html());
}

jQuery操作元素属性

function testField(){
    //获取元素对象
    var uname=$("#uname");
    //获取
    alert(uname.attr("type"));
    //修改
    uname.attr("type","button");
}

jQuery操作元素的内容

function testHtml(){
	//获取元素对象
    var showdiv=$("#showdiv");
    //获取元素内容
    alert(showdiv.html());
    //修改元素内容
    showdiv.html(showdiv.html()+"<b>今天天气好</b>");
}
function testText(){
	//获取元素对象
    var showdiv=$("#showdiv");
    //获取元素内容
    alert(showdiv.text());
    //修改元素内容
    showdiv.html(showdiv.text()+"今天天气好");
}

jQuery操作元素的样式

function testCss(){
    //获取元素对象
    var showdiv=$("showdiv");
    //样式--增加
    showdiv.css("background-color","orange");
    showdiv.css({"border":"solid 1px","":""});
    //样式--获取
    alert(showdiv.css("width"));
}
function testAddClass(){
	//获取元素对象
    var div=$("#div01");
    //操作div样式
    div.addClass("common");
    //删除元素样式
    div.removeClass("common");
}

jQuery操作文档的结构

• append 内容追加到对象的内部

• appendTo 指定的元素对象追加到指定的对象内容

• prepend 内容追加到对象的内部的前面

• prependTo 参考appendTo

• after 内容追加到对象的外部

• before 内容追加到对象的外部前面

• insertAfter 参考appendTo

• insertBefore 参考appendTo

• empty 删除

• 参考API

• ...

jQuery的事件机制

//js动态添加事件
function testThing(){
    //获取元素对象
    var btn=document.geetElementById("btn");
    //添加事件
    btn.onclick=function(){
        alert("我是js方式");
    }
}
//jQuery
function testBind(){
	$("#btn").bind("click",function(){alert("我是bind绑定单击事件")});
    $("#btn").bind("click",function(){alert("我是bind绑定单击事件222")});
}
function testUnBind(){
	$("#btn").unbind("click",function(){alert("我是bind绑定解绑")});
}
function testOne(){
	$("#btn").one("click",function(){alert("我是bind绑定单击一次性事件")});
}

//js页面载入事件
window.onload=function(){
    alert("js页面载入");
}
window.onload=function(){
    alert("js页面载入2222");
}
//jQuery页面载入事件
$(document).ready(function(){
    alert("jQuery页面载入");
})
$(document).ready(function(){
    alert("jQuery页面载入2222");
})

jQuery的动画效果

...

jQuery的案例

...