Jquery 操作


<script>
$(document).ready(function(){
//
<!-- radio的禁用 -->

var input = $("#appDIV").find("input:radio");
input.attr("disabled","disabled");
input.each(function(){
if($(this).val()==2){
$(this).attr("checked",true);
}
});

<!-- checkbox的禁用 -->
var checkbox = $("#ce").find("input:checkbox");
checkbox.attr("disabled","disabled");
checkbox.each(function(){
if($(this).val()=="Monthly"){
$(this).attr("checked",true);
}
});

<!--select添某个元素为disabled-->
$('#selectItem option[value=7]').attr('disabled', 'disabled');
$('#selectItem option[value=8]').attr('disabled', 'disabled');
//value就是类别的ID,使用option disabled 属性,但是IE6 好像不支持
//找了下一段代码,支持E6
$('#selectItem').each(function(){
this.rejectDisabled = function(){
if (this.options[this.selectedIndex].disabled){
if (this.lastSelectedIndex) {
this.selectedIndex = this.lastSelectedIndex;
} else {
var first_enabled = $(this).children('option:not(:disabled)').get(0);
this.selectedIndex = first_enabled ? first_enabled.index : 0;
}
} else {
this.lastSelectedIndex = this.selectedIndex;
}
};
this.rejectDisabled();
this.lastSelectedIndex = this.selectedIndex;
$(this).children('option[disabled]').each(function(){
$(this).css('color', '#CCC');
});
$(this).change(function() {
this.rejectDisabled();
});
});
//获取值
//alert( $('#dd').val());//type=text
//alert($('input[name=rr][checked]').val());//type=radio
//alert($('input[name=ff][checked]').val());//type=checkbox
// alert($("select[name=ss] option[selected]").val());//select 相等于alert($("#ss option[selected]").val());

//获取文本
//alert($("select[name=ss] option[selected]"));//select


//控制
/*// Disable #dd 禁用
$("#dd").attr("disabled","disabled");
// Enable #dd 解禁
$("#jj").removeAttr("disabled");*/


//$('input[name=rr]').get(0).checked = true;//第一个radio被选中

//alert($('input[name=rr2]').get(0).checked);
//alert($("input[type=radio][value=34]").attr("checked",'checked'));//value=34的radio被选中

//alert($("input[type=checkbox][value=gd]").attr("checked",'checked'));//value=gd的checkbox被选中
//$('input[name=ff]').get(1).checked = true;//第一个check被选中



/*//根据option的text选中option
count=$("#ss").find("option").length;
for(var i=0;i<count;i++)
{
if($("#ss").get(0).options[i].text == 'd')
{
$("#ss").get(0).options[i].selected = true;

break;
}
} */

//$("<option value='1'>1111</option><option value='25'>22s22</option>").appendTo("#ss");//增加option
//$("#ss option[value=8]").remove("");//除去 <option value='8'>d</option>

//$("#ss").attr("value",'2');//选中option
$('#ss')[0].selectedIndex = 1;//选中option

//$("#ss").empty();//清空全部option

/*//替换文本
var $thirdLink = $("#ssd");
var linkText = $thirdLink.text().replace('foo','bar');
$thirdLink.text(linkText); */


});
</script>

<body>
<div id="appDIV">
<input type="radio" value="1"/>1
<input type="radio" value="2"/>2
<input type="radio" value="3"/>3
</div>
<div id="sel">
<select id="selectItem">
<option value="1" disabled="disabled">Flowers</option>
<option value="2" disabled="disabled">Gardens</option>
<option value="3" selected ="true">Trees</option>
<option value="4" disabled="disabled">1</option>
<option value="5" disabled="disabled">2</option>
<option value="6" disabled="disabled">3</option>
<option value="7" >4</option>
<option value="8" >5</option>
<option value="9" disabled="disabled">6</option>
</select>
</div>
<div id="ce">
<input type="checkbox" name="newsletter" value="Daily" />Dairy
<input type="checkbox" name="newsletter" value="Weekly" />Weekly
<input type="checkbox" name="newsletter" value="Monthly" />Monthly
</div>
<input type="text" id="dd" name="dd" value="dds"/>dd

<input name="rr" id="rr" type="radio" value="34" />ff
<input name="rr" id="rr2" type="radio" value="4" />55

<input name="ff" type="checkbox" value="aa" />jgdg
<input name="ff" type="checkbox" value="gd" />jgdg

<select name="ss" id="ss" size="1">
<option value=""></option>
<option value="8">d</option>
<option value="2">g</option>
</select>

<br/>
<input type="button" id="button" value="11111" />
<input type="button" id="jj" value="2222222" />
<br/>

<div id="ssd">fgfooHello</div>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery是一个流行的JavaScript库,它简化了对DOM元素的操作。下面是一些常见的jQuery操作DOM的示例: 1. 选择元素: 使用jQuery选择器可以方便地选择DOM元素。例如,要选择id为"myElement"的元素,可以使用以下代码: ```javascript var element = $("#myElement"); ``` 2. 操作样式: 使用jQuery可以轻松地添加、删除或修改元素的样式。例如,要将元素的背景颜色设置为红色,可以使用以下代码: ```javascript element.css("background-color", "red"); ``` 3. 操作内容: jQuery提供了许多方法来操作元素的内容。例如,要获取或设置元素的文本内容,可以使用以下代码: ```javascript var text = element.text(); // 获取文本内容 element.text("Hello, World!"); // 设置文本内容 ``` 4. 操作属性: 使用jQuery可以方便地获取或设置元素的属性。例如,要获取或设置元素的href属性,可以使用以下代码: ```javascript var href = element.attr("href"); // 获取href属性值 element.attr("href", "https://www.example.com"); // 设置href属性值 ``` 5. 添加和删除元素: 使用jQuery可以在DOM中添加或删除元素。例如,要在一个元素内部添加一个新的子元素,可以使用以下代码: ```javascript element.append("<div>New element</div>"); // 添加新的子元素 ``` 这些只是jQuery操作DOM的一些基本示例,jQuery还提供了许多其他强大的功能,如事件处理、动画效果等。你可以查阅jQuery的文档以了解更多信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值