摘要：//html部分<form action=""> <label for="">姓名：<input type="text" id="name"></label> <label for="">密碼：<input type="
//html部分
<form action="">
<label for="">姓名：<input type="text" id="name"></label>
<label for="">密碼：<input type="password"></label>
<label for="">家庭地址：<input type="text"></label>
<label for="">
姓別：
<input type="radio" name='sex' id="men" ><label for="men">男</label>
<input type="radio" name='sex' id="woman" checked><label for="woman">女</label>
<input type="radio" name='sex' id="none" ><label for="none">保密</label>
</label>
<label for=""><input type="image" src="images/1036786-1.jpg"/></label>
<label for="">
門店：
<select>
<option>長興店</option>
<option selected>元崗店</option>
<option>鎮(zhèn)龍店</option>
<option>九佛店</option>
<option>羅崗店</option>
</select>
</label>
<label for="">輸出結(jié)果：<textarea cols="30" rows="10" disabled></textarea></label>
<input type="button" value="提交">
</form>
//jQuery部分
$(document).ready(function() {
$(document).ready(function() {
//樣式多屬性調(diào)整
$('.abox1').css({
'background-color': 'red',
'border': '5px solid green',
'color':'blue'
});
//文檔處理：
// $('.abox1').append('<b>Hello world</b>');
//事件處理：光標懸停當前標簽顯示文本內(nèi)容
$(".abox1").on("mouseover", function(){
if($(this).text() == 'Hello world'){
$('.abox1').empty();
}else{
$('.abox1').append('<b>Hello world</b>');
}
});
//事件處理：焦點失去當前標簽隱藏文本內(nèi)容
$(".abox1").on("mouseout", function(){
if($(this).text() == 'Hello world'){
$('.abox1').empty();
}else{
$('.abox1').append('<b>Hello world</b>');
}
});
//選擇form表單的子元素label，將其轉(zhuǎn)化block則換行
$("form>label").css({
'display':'block',
'margin-bottom':'5px',
'font-size':'14px'
});
//選擇表單除了submit類型的input標簽
$("form input[type!='button']").css({
'width': '100px',
'height':'20px',
'background':'#FFFFCC'
});
//選擇表單中不可用的input
$("form input[type='radio']").css({
'width': '14px',
'height':'14px',
'background':'#CCC',
'margin-right':'2px',
'position':'relative',
'top':'2px'
});
//選擇表單中radio類型的姓別:男選項
$("form label[for='men']").css({
'font-size':'14px',
'color':'blue',
'margin-right':'15px'
});
//選擇表單中radio類型的姓別:女選項
$("form label[for='woman']").css({
'font-size':'14px',
'color':'#FF3399',
'margin-right':'15px'
});
//選擇表單中radio類型的姓別:保密選項
$("form label[for='none']").css({
'font-size':'14px',
'color':'#ccc'
});
//選擇表單中image類型，設(shè)置其大小
$("form input[type='image']").css({
'width':'100px',
'height':'100px',
});
//光標移入時，圖片變大，脫離變大
$("form input[type='image']").on("mouseover",function(){
$(this).css({
"width":"200px",
"height":"200px"
});
})
//光標脫離焦點時，恢復(fù)原大小
$("form input[type='image']").on("mouseout",function(){
$(this).css({
"width":"100px",
"height":"100px"
});
})
//選擇表單中image類型,練習獲取屬性、獲取樣式、獲取內(nèi)容、設(shè)置屬性、設(shè)置樣式、設(shè)置內(nèi)容；
console.log($("form input[type='image']").attr("src")); //獲取屬性
console.log($("form input[type='image']").css("width")); //獲取樣式
console.log($(".liuyan .liuyanheader span:nth-child(1)").text()) //獲取盒子內(nèi)容
// $("form input[type='image']").attr("src","images/phonefront.png"); //設(shè)置屬性
// $("form input[type='image']").css("width","200px") //重新設(shè)置樣式
$(".liuyan .liuyanheader span:nth-child(1)").empty(); //清空盒子內(nèi)容
$(".liuyan .liuyanheader span:nth-child(1)").append('Newcontent') //追加盒子內(nèi)容
console.log($("form input[type='image']").attr("src")); //重新獲取屬性
console.log($("form input[type='image']").css("width")); //重新獲取樣式
console.log($(".liuyan .liuyanheader span:nth-child(1)").text()) //重新獲取盒子內(nèi)容
//獲取已選姓別的radio標簽的屬性值
console.log($("form label input:radio[name=sex]:checked").attr("id")); //獲取已選姓別的標簽的id屬性值
// $("form label input:radio[name=sex]:checked").attr(''
console.log($("form select option:selected").val()); // 獲取已選門店的select標簽的屬性值
// $("form input[type != 'button']:eq(0)").css('background','green');
// 點擊提交后，將用戶錄入的信息并接并輸出至form input:disable標簽中
$("form>input[type = 'button']").click(function(){
// str = $("form input[type!='submit']").text();
namestr = $("form input[type != 'button']:eq(0)").val();
password= $("form input[type != 'button']:eq(1)").val();
address= $("form input[type != 'button']:eq(2)").val();
sex = $("form label input:radio[name=sex]:checked").attr("id");
shop = $("form select option:selected").val();
// console.log(namestr+'&^&'+password+'&^&'+changjia);
//\r:換行符
$('form textarea:disabled').append('姓名:'+namestr+'\r'+'密碼:'+password+'\r'+'家庭地址:'+address+'\r'+'姓別:'+sex+'\r'+'所屬分店:'+shop+'\r')
});
});
//總結(jié)：使用各種各樣的選擇器，針對表單不同元素進行精準選擇，分別練習了獲取元素屬性、獲取元素樣式、獲取元素內(nèi)容、設(shè)置元素屬性、設(shè)置元素樣式、設(shè)置元素內(nèi)容，需注意的是val()才是用于input、textarea、radio、checkbox等標簽的取值函數(shù)，而text()返回的是標簽上面的文本內(nèi)容，而不是錄入值。
效果圖如下：
批改老師：查無此人批改時間：2019-04-25 13:34:04
老師總結(jié)：完成的不錯，jq比js簡單很多，可以多聯(lián)系，代替常規(guī)的js。繼續(xù)加油。