引入jQuery

<script type="text/javascript" src="./lib/jquery.js"></script>

$(function(){//表示页面加载完成，相当于：window.onunload = function()
    var $butt =  $("#bt");//表示按照id查找对象
    $butt.click(function(){
        alert("jQuery的单击事件");
    })
})

可以直接把html添加到body中

$(function(){
    $("<div><span>模块1</span><span>模块2</span></div>").appendTo("body");
})

DOM与JQuery对象相互转化

将dom对象传入$()函数里即可转化为jQuery对象

$(function(){
    //拿到DOM对象：
    var domObject = document.getElementById("but1");
    //转化为JQuery对象：
    var $j = $(domObject);
    //输出看效果：
    alert($j);
})

拿到jQuery对象相当于拿到了dom对象的数组，所以只需要根据下标就能取出jQuery对象

$(function(){
    //拿到jQuery对象：
    var j = $("#but1");
    //转化为DOM对象：
    var domObj = j[0];
    //输出看效果：
    alert(domObj);
})

jQuery

jQuery全称 javaScript Query是js的一个框架。本质上仍然是js,支持各种主流的浏览器；使用特别简单；拥有便捷的插件,扩展机制和丰富的插件。

选择器

JQuery提供了多种多样的选择器，来选择需要操作的Html元素对象，其他的可以查文档。

id选择器

<input type="text" value="张三" id="uname" onclick="testId()"/>

function testId(){
    //id选择器：
    var inp = $("#uname");
    //获取input的value值：
    alert(inp.val());
}

标签选择器

<input type="text" value="张三" id="uname" onclick="testTag()"/>

function testTag(){
    //标签选择：
    var inp = $("input");
    //这个返回值是一个数组
    alert(inp.length);
    //获取"张三"
    alert(inp[0].value);
}

类选择器

<input class="comment" type="text" value="张三" onclick="testClass()"/>

function testClass(){
    //类选择器
    var inp = $(".comment");
    //数组
    alert(inp);
}

组合选择器

<h4>嘿嘿</h4>
<input class="comment" type="text" value="张三" id="uname" onclick="testClass()"/>
<input type="text" value="李四" id="uname"/>

function testClass(){
    //组合选择器
    var eles = $("h4,.comment,#uname");
    //数组
    alert(eles.length);
}

子选择器

<style type="text/css">
    #showDiv{
    height: 200px;
    width: 300px;
    border: solid 2px blueviolet;
    }
</style>

<div id="showDiv">
    <input type="text" value="张三" id="uname" onclick="testClass()"/>
    <input type="text" value="李四" id="uname"/>
    <input type="text" value="王五" id="uname"/>
    <input type="text" value="马六" id="uname"/>
</div>

function testClass(){
    //子选择器：
    var eles = $("div>input");
    //或者：
    var eles = $("#showDiv>input");
    alert(eles.length);
}

操作元素属性

获取元素属性值

<input id="uname" type="text" value="张三" onclick="testFiled()"/>

function testFiled(){
    var uname = $("#uname");
    //结果：text张三，但是这里获取的value只能获取默认的
    alert(uname.attr("type")+uname.attr("value"));
    //要想获取输入框内的实时属性值:
    alert(uname.attr("type")+uname.val());
}

修改属性值

<input id="uname" type="text" value="输入框" onclick="testFiled()"/>

function testFiled(){
    var uname = $("#uname");
    //把输入框变成一个按钮:
    uname.attr("type","button");
}

操作元素内容

修改html元素内容

<input type="button" onclick="testFiled()" value="获取标签内的内容"/>
<input type="button" onclick="testChange()" value="修改标签内的内容"/>
<div id="showdiv">
    <b>嘿嘿</b>
</div>

function testFiled(){
    var showdiv = $("#showdiv");
    alert(showdiv.html());
    //获取到的结果：<b>嘿嘿</b>
}
function testChange(){
    var showdiv = $("#showdiv");
    showdiv.html("<b>今天天气真好！</b>");
    //实现内容拼接:可以实现不断地向界面添加按钮
    showdiv.html(showdiv.html()+"<b>今天天气真好！</b>");
    //调用text("contexn")也可以执行修改内容，但是不解析标签
    showdiv.text("不解析标签");
}
//修改css样式
function testAdd(){
    var showdiv = $("#showdiv");
    //增加样式
    showdiv.css("background-color","orange");
    //修改样式(Json)
    showdiv.css({"border":"solid orange","height":"300px"});
    //获取样式
    alert(showdiv.css("width"));
}

操作样式

<div id="showdiv"></div>

<style type="text/css">
    .com{
        width: 100px;
        height: 200px;
        background-color: black;
        border: #00FFFF;
    }
</style>
<script type="text/javascript">
    function testAdd(){
        var showdiv = $("#showdiv");
        showdiv.addClass("com");
        //删除某一个样式
        showdiv.removeClass("dd");
    }
</script>

操作文档结构

内部插入

<input type="button" onclick="testFiled()" value="开始测试"/>
<div id="showdiv">
    <b>今天中午吃什么</b>
</div>

function testFiled(){
    var div = $("#showdiv");
    //后面
    div.append("<b>饭</b>");
    //前面
    div.prepend("<b>你好，</b>");
}

这种方式也可以实现数据填充

<u id="u1">嘿嘿</u>
<div id="showdiv">
    <b>今天中午吃什么</b>
</div>

function testFiled(){
    var div = $("#showdiv");
    $("#u1").appendTo(div);
}

可以实现一个添加一个标签那种效果

外部插入

<div id="showdiv">
    <b>给我笑一个</b>
</div>

function testFiled(){
    var div = $("#showdiv");
    //后面
    div.after("<b>哈哈</b>");
    //前面
    div.before("<b>哈哈</b>");
}

操作事件

使用js给按钮添加事件

<input type="button" value="给下面的按钮添加一个事件" onclick="fun()" />
<input id="btn" type="button" value="按钮"/>

function fun(){
    var btn = document.getElementById("btn");
    btn.onclick=function(){
        alert("我是js方式");
    }
}

使用js的方式实际上是一个赋值的操作，无论赋值多少次，那么该按钮的事件只能是一个。

使用jQuery绑定事件

<input type="button" value="给下面的按钮添加一个事件" onclick="fun()" />
<input id="btn" type="button" value="按钮"/>

function fun(){
    $("#btn").bind("click",function(){
        alert("我是bind绑定单击事件");
    });
}

jQuery使用的是一种追加的方式，绑定多次，就会使得方法执行多次。

解绑单击事件

<input type="button" value="给下面的按钮添加一个事件" onclick="fun()" />
<input id="btn" type="button" value="按钮"/>
<input type="button" value="解绑所有事件" onclick="fun1()"/>

function fun(){
    $("#btn").bind("click",function(){
        alert("我是bind绑定单击事件");
    });
}
function fun1(){
    $("#btn").unbind("click");
}

解绑的动作指的是解绑click事件，直接移除该事件，要想使事件回来，再次绑定即可。

一次性事件

function fun(){
    $("#btn").one("click",function(){
        //执行一次后失效
        alert("我是one事件");
    });
}

使用unbind也是可以解绑one事件的。

页面载入事件

js写法：

window.onload=function(){
    alert("我是页面载入");
}

jQuery写法

$(document).ready(function(){
    alert("我是jQurey");
});

jQuery动画

show([time])

<style>
#showdiv{
    height: 200px;
    width: 200px;
    display: none;
    background-color: orange;
}
</style>
<input type="button" value="播放动画" onclick="fun()" />
<div id="showdiv"></div>

function fun(){
    $("#showdiv").show(300);
}

hide([time])

<style>
#div01{
    height: 200px;
    width: 200px;
    background-color: aqua;
}
#div02{
    height: 200px;
    width: 200px;
    display: none;
    background-color: orange;
}
</style>
<input type="button" value="播放动画" onclick="fun()" />
<div id="div01"></div>
<div id="div02"></div>

function fun(){
    $("#div02").show(300);
    $("#div01").hide(300);
    $("#div01").show(300);
    $("#div02").hide(300);
}

toggle([time])

替换上面的效果

function fun(){
    $("#div01,#div02").toggle(200);
}

上下滑动

function fun(){
    $("#div01").slideUp(200);
    $("#div02").slideDown(200);
}

淡入淡出

function fun(){
    $("#div01").fadeOut(1000);
    $("#div02").fadeIn(1000);
}