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

Jquery基础

2016-05-25 18:55 615 查看

<head>

</head>

<script src="../jquery-2.2.3.min.js"></script>

<body>
<div id="aa" style="">hello</div>
<div class="bb">22</div>
<div class="bb">33</div>
<div class="bb">44</div>
<input type="text" name="cc" bs="dd"/>

</body>

<script type="text/javascript">
$(document).ready(function(e){
//根据ID找元素，找到的是具体的JQUERY对象，如果要取DOM对象，则取索引0的对象
var jd = $("#aa");//根据ID
var jc = $(".bb");//根据CLASS
var jdiv = $("div");//根据标签名
var ip = $("input[name=cc]");//方括号里面用属性筛选

for(var i=o;i<jc.length;i++)
{
jc.ep(i);//ep是取数组里面的第几个JQUERY对象
}

//操作内容
//1.非表单元素
jd.text();//取值方法,取内容
jd.text("aa");//赋值方法
jd.html();//取值方法,取代码
jd.html("vv");//赋值方法

//2.表单元素
jd.val();//取值
jd.val("")//赋值

//操作属性
jd.attr("bs","aa");//设置属性
jd.attr("bs");//获取属性
jd.removeAttr("bs");//移除属性

//操作样式
jd.css("background-color","green")

//给一个元素加事件
$("#aa").click(function(){
alert("aa");
});

//给多个元素加事件
$(".bb").click(function(){
alert($(this).text());
});

//给多个元素设置相同的样式
$(".bb").css("color","brown");

});

</script>

Jquery的全选应用

<head>
<script src="../jquery-2.2.3.min.js">
</script>
</head>

<body>

<input type="checkbox" id="all"/>全选
<input class="t" type="checkbox" value="aa" />aa
<input class="t" type="checkbox" value="bb" />bb
<input class="t" type="checkbox" value="cc" />cc
<input class="t" type="checkbox" value="dd" />dd
<input class="t" type="checkbox" value="ee" />ee

<input type="button" value="测试" id="btn" />
<input type="text" id="tex" />
<input type="button" value="设置选中" id="sel" />

</body>
<script type="text/javascript">
$(document).ready(function(e) {

//全选
$("#all").click(function(){
var ck = $(".t");
var xz = $(this)[0].checked;

ck.prop("checked",xz);

});

//取选中的值
$("btn").click(function(){
var ck = $(".t");
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i).prop("checked"))//ck.eq(i)[0].checked
{
alert(ck.eq(i).val());
}
}

});

//设置某项选中

$("#sel").click(function(){
var v = $("#tex").val();

var ck = $(".t");
ck.prop("checked",false);
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i).val()==v)
{
ck.eq(i).prop("checked",true)
}
}

})

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航