您的位置：首页 > Web前端 > JQuery

20151227：Jquery

2015-12-28 21:22 656 查看
Jquery:就是封装好的JS

带min的是压缩版的，不带min的就是正常的

先建一个Script文件夹，把JQuery文件放到里面，把JQuery包引用到页面。
Jquery要求所有页面的内容加载完成之后再执行JQuery语法
　　$(document).ready(function(){
　　　　--- jQuery functions go here ----
　　});
这是为了防止文档在完全加载（就绪）之前运行jQuery代码，如果在文档没有完全加载之前就运行函数，操作可能失败。

jQuery 语法：是为 HTML 元素的选取编制的，可以对元素执行某些操作。
　　基础语法是：$(selector).action()
　　美元符号$定义 jQuery
　　选择符（selector）“查询”和“查找” HTML 元素
　　jQuery 的 action() 执行对元素的操作
示例
　　$(this).hide() - 隐藏当前元素
　　$("p").hide() - 隐藏所有段落
　　$(".test").hide() - 隐藏所有 class="test" 的所有元素
　　$("#test").hide() - 隐藏所有 id="test" 的元素

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="div1"><a>测试内容一</a></div>
<div class="test" id="div2" style="color:black">测试内容二</div>
<div class="test" style="color:black">测试内容三</div>
<div class="test" style="color:black">测试内容四</div>

<input class="ck" name="sj" type="checkbox" value="001"  />水果
<input class="ck" type="checkbox" value="002" />家电
<input class="ck" bs="sm" type="checkbox" value="003" />数码
<input class="ck" type="checkbox" value="004" />服装
<input id="btn" type="button" value="确定" />

<div id="test1" shuxing="aaa" style="color:green;background-color:white">测试</div>
</div>
</form>


练习：

//JS找元素
var div1 = document.getElementById("div1");
alert(div1.innerText);


实现效果：



根据ID取元素：

$(document).ready(function (e) {
//根据ID取元素
var div1 = $("#div1");
alert(div1[0]);//JQuery取出的不是DOM对象，是JQuery对象，要取该对象本身要在数组里面取第一个

$("#div1").html();//取ID为div1元素所包含HTML代码
$("#div1").text();//取ID为div1元素所包含文本

})


效果：



根据class取元素：

$(document).ready(function (e) {
//根据class取元素
$(".test").css("color", "yellow");//改变class名为test的所有元素内文本的颜色
})


效果：



给元素添加一个点击事件：

$(document).ready(function (e) {
//给元素添加一个点击事件
$("#btn").click(function (e) {
$(this).val();//取自身的value值
//根据class取所有名为c元素k的
var query = $(".ck");
for (var i = 0; i < query.length; i++) {

var ck = query.eq(i)[0];
if (ck.checked) {
alert(query.eq(i).val());
}
}
});
})


效果：



根据标签名找元素：

//根据标签名找元素
$("div");


属性筛选：

$(document).ready(function (e) {
//根据属性筛选
alert($(".ck[name=sj]").val());
alert($(".ck[bs=sm]").val());
})


效果：



操作内容：

$(document).ready(function (e) {
//操作内容
$("#test1").html("<span>hello</span>");//取ID为div1元素所包含HTML代码
$("#test1").text("测试");//取ID为div1元素所包含文本
})


效果：





表单元素取值、赋值

$(document).ready(function (e) {
//表单元素
//alert( $("#btn").val());//取值
$("#btn").val("取消");//赋值
})


取值：

赋值：


操作属性：

$(document).ready(function (e) {
//操作属性
alert( $("#test1").attr("shuxing"));//取属性值
$("#test1").attr("shuxing","bbb");//给属性赋值
})


取值：


赋值：


操作样式：

$(document).ready(function (e) {
//操作样式
alert($("#test1").css("color"));//取样式得到值
$("#test1").css("background-color","yellow");//设置样式
$("#test1").css("font-size", "25px");
})


取值：

设置：


加事件：

$(document).ready(function (e) {
//加事件
$("#div1").click(function () {
alert($(this).text());//给单独一个加事件
})

$(".test").click(function () {
alert($(this).text());//给class加事件
})
})


点击弹出效果


完整的aspx代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="div1"><a>测试内容一</a></div>
<div class="test" id="div2" style="color:black">测试内容二</div>
<div class="test" style="color:black">测试内容三</div>
<div class="test" style="color:black">测试内容四</div>

<input class="ck" name="sj" type="checkbox" value="001"  />水果
<input class="ck" type="checkbox" value="002" />家电
<input class="ck" bs="sm" type="checkbox" value="003" />数码
<input class="ck" type="checkbox" value="004" />服装
<input id="btn" type="button" value="确定" />

<div id="test1" shuxing="aaa" style="color:green;background-color:white">测试</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function (e) {
//根据ID取元素
//var div1 = $("#div1");
//alert(div1[0]);//JQuery取出的不是DOM对象，是JQuery对象，要取该对象本身要在数组里面取第一个

//$("#div1").html();//取ID为div1元素所包含HTML代码
//$("#div1").text();//取ID为div1元素所包含文本

//根据class取元素
//$(".test").css("color", "yellow");//改变class名为test的所有元素内文本的颜色

//给元素添加一个点击事件
//$("#btn").click(function (e) {
//$(this).val();//去自身的value值
//根据class取所有名为c元素k的
//    var query = $(".ck");
//    for (var i = 0; i < query.length; i++) {

//        var ck = query.eq(i)[0];
//        if (ck.checked) {
//            alert(query.eq(i).val());
//        }
//    }
//});

//根据标签名找元素
//$("div");

//根据属性筛选
//alert($(".ck[name=sj]").val());
//alert($(".ck[bs=sm]").val());

//操作内容
//$("#test1").html("<span>hello</span>");//取ID为div1元素所包含HTML代码
//$("#test1").text("测试");//取ID为div1元素所包含文本
//表单元素
//alert( $("#btn").val());//取值
//$("#btn").val("取消");//赋值

//操作属性
//alert( $("#test1").attr("shuxing"));//取属性值
//$("#test1").attr("shuxing","bbb");//给属性赋值

//操作样式
//alert($("#test1").css("color"));//取样式得到值
//$("#test1").css("background-color","yellow");//设置样式
//$("#test1").css("font-size", "25px");

//加事件
$("#div1").click(function () {
alert($(this).text());//给单独一个加事件
})

$(".test").click(function () {
alert($(this).text());//给class加事件
})
})
//JS找元素
//var div1 = document.getElementById("div1");
//alert(div1.innerText);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航