jQuery 浅学

最新推荐文章于 2022-07-26 21:53:09 发布

斜陽丅微笑

最新推荐文章于 2022-07-26 21:53:09 发布

阅读量728

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Yanke8116188/article/details/16966669

版权

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){

//得到标签的class属性值，并改变class的属性值
var className = $("p").attr("class");
//alert(className);
$("p").attr("class","P");
//alert($("p").attr("class"));

//$("p.p").hide();jquery隐藏class为p的<p>
//$("p.p").css("display","none");//通过改变css样式隐藏class为p的<p>标签
//$("p.p").attr("style", "display:block");这种方法暂时还没测试出来

//得到标签的id属性值，并改变id的属性值
var id = $("p").attr("id");
//alert(id);
$("p").attr("id","id");
//alert($("p").attr("id"));

//得到a标签的href值
var href = $("a").attr("href")
$("a").html("GOOGL搜索");
$("a").attr("href","www.google.com");

//json字符串
var data = {"results":[{"name":"黎明","sex":"男","address":"中国","post":"8116188"},
{"name":"王丹","sex":"女","address":"中国","post":"8116188"},
{"name":"曹颖","sex":"女","address":"中国","post":"8116188"}]};
var htmlStr = "";
$.each(data.results,function(i,item){//i为下标
htmlStr += "<tr><td align='center'>"+(i+1)+"</td>";
htmlStr += "<td align='center'>"+item.name+"</td>";
htmlStr += "<td align='center'>"+item.sex+"</td>";
htmlStr += "<td align='center'>"+item.address+"</td>";
htmlStr += "<td align='center'>"+item.post+"</td></tr>";
});

$("div#show_div table").append(htmlStr);

//$("div#show_div table").html(htmlStr);

//得到div高度，用于div中的内容自增长

$("#content").height();
$("#content").innerHeight();//元素内部区域高度，忽略padding、border
$("#content").outerHeight();//忽略边框
$("#content").outerHeight(true);//包含边框高度

});

$(document).ready(function(){
$('#datatable thead tr th').each(
function(i,val){
var index = i;
if(index == 3 || index == 4 ||index == 5 ||index == 6){
$(val).css("cursor","pointer");
$(val).bind("click",{value:index},function(event){ //jquery bind 事件传参数
var order = event.data.value;
alert(order);
});}
});
});

</script>

</head>

<body>
<h2>This is a heading</h2>
<p class="p_div" id="p_id">显示或隐藏测试</p>
<div id="show_div">

<thead>

</tr>

<thead>

</table>
<div>
<a href="www.baidu.com">百度搜索</a>

</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Jquery给基本控件的取值、赋值 TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框，文本区域： $("#text_id").attr("value",'');//清空内容 $("#text_id").attr("value",'test');// 填充内容
Jquery给基本控件的取值、赋值

TEXTBOX:
var str = $('#txt').val();

$('#txt').val("Set Lbl Value");

1.//文本框，文本区域：
2.$("#text_id").attr("value",'');//清空内容
3.$("#text_id").attr("value",'test');// 填充内容
LABLE:

var str = $('#lbl').text();

$('#lbl').text("Set Lbl Value");

1.   var valradio = $("input[@type=radio][@checked]").val();
2.   var item = $('input[@name=items][@checked]').val();
3.var checkboxval = $("#checkbox_id").attr("value")；
4.   var selectval = $('#select_id').val();
1.//多选框checkbox：
2.$("#chk_id").attr("checked",'');//使其未勾选
3.$("#chk_id").attr("checked",true);// 勾选
4.if($("#chk_id").attr('checked')==true) //判断是否已经选中
1.单选组radio：
2.
3.$("input[@type=radio]").attr("checked",'2'); //设置value=2的项目为当前选中项
4.
5.//下拉框select：
6.$("#select_id").attr("value",'test');// 设置value=test的项目为当前选中项
7.$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")//添加下拉框的 option
8.$("#select_id").empty()；//清空下拉框
9.
10.获取一组名为 (items)的radio被选中项的值
11.var item = $('input[@name=items][@checked]').val();//若未被选中则val() = undefined
12.获取select被选中项的文本
13.var item = $("select[@name=items] option[@selected]").text();
14.select下拉框的第二个元素为当前选中值
15.$('#select_id')[0].selectedIndex = 1;
16.radio单选组的第二个元素为当前选中值
17.$('input[@name=items]').get(1).checked = true;
18.
19.//重置表单
20.$("form").each(function(){
21.   .reset();
22.});
摘要： Jquery给基本控件的取值、赋值 TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框，文本区域： $("#text_id").attr("value",'');//清空内容 $("#text_id").attr("value",'test');// 填充内容
Jquery给基本控件的取值、赋值