12.27 jquerey 学习

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

<!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-1.7.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="div1"><a>测试内容11</a></div>
<div class="test" id="div2">测试内容22</div>
<div class="test">测试内容33</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"/>v数码
<input class="ck" type="checkbox" value="004" />服装
<input type="button" value="确定" />
<div id="test1" shuxing="aaa" style="color:green ;background-color:white" ></div>
</div>
</form>

<script type="text/javascript">

//jquery元素选取及取值

//jquery 的代码 内容都写在大括号里面
$(document).ready(function (e) {

//根据ID取元素
//var div1 = $("#div1");
//alert(div1[0]);//jquery对象取出来的是一个数组。数组的第一个对象就是div元素

//$("#div1").text();//取ID为div1元素所包含的文本 测试内容11
//$("#div1").html();//取ID为div1元素所包含的HTML代码 <a>测试内容11</a>


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


////jquery 给元素添加事件怎么添加

//$("#btn").click(function (e) {

//$(this).val();//取自身的value值
// //根据class取所有class名为ck的元素
// var query = $(".ck");

// for (var i = 0; i < query.length; i++) {
// //.eq意思是去第几个。常用在循环中
// var ck = query.eq(i)[0];
// if (ck.checked) {

// alert(query.eq(i).val());//取value值

// }


// }

//})


//根据标签名找元素

$(".ck[name=sj]").val();//[]属性筛选。name可以是原有的也可以是自己定义


//操作内容 取值用方法括号 赋值直接在括号里面写内容

$("#test1").text("测试");//取ID为div1元素所包含的文本 测试内容11
$("#test1").html("<span> hellow</span>");//取ID为div1元素所包含的HTML代码 <a>测试内容11</a>

//表单元素
$("#btn").val();//取值
$("#btn").val("取消");赋值


//操作属性 修改属性找属性
$("#test1").attr("shuxing");//取属性值

$("#test1").attr("shuxing","bbbb");//修改属性的值

//操作样式
alert($("#test1").css("color"));//取样式值
$("#test1").css("background-color:yellow");//改变样式
$("#test1").css("font-size", "25px")


//加事件
//给id=div1 的元素弹窗体
$("#div1").click(function (e) {

alert($(this).text());//取文本内容

//给所有class 名为test的元素弹出value值
$(".test").click(function (e) {


alert($(this).text());//blur 是失去焦点时触发
})


})

})

////js找元素 按顺序执行到这个地方时就执行取出的是div元素
//var div1 = document.getElementById("div1");
//alert(div1.innerText);
//alert(div1.innerHTML);

</script>

</body>
</html>

原文地址:https://www.cnblogs.com/cf924823/p/5081754.html