javascript
JavaScript新手经常遇到的问题（一）
1、:before和:after，position: absolute;才可以調節高寬
2、判斷背景顏色
$(this).css("background-color")=="rgb(95, 158, 160)" ，注加空格
$(this).css("background-color")==“red”是錯誤的
注意：一定要在background加的color，未改顏色之前是rgba(0, 0, 0, 0)
3、用Class，點擊事件
<div class="dic" name="div1"></div>
<div class="dic" name="div4"></div>
<div class="dic" name="div2"></div>
<div class="dic" name="div3"></div> <script>
$(".dic").click(function(){
//注意一定要在background加的color，未改顏色之前是rgba(0, 0, 0, 0)
if ($(this).css("background-color")=="rgb(95, 158, 160)") {
$(this).css("background","red");
alert($(this).attr("name")); //用prop獲取不到name } else{
//對比字符串上加上了空格,彈出了true
// alert($(".dic").css("background")) //對比
$(this).css("background","cadetblue");
}
})
</script>
4、獲取父元素
//獲取當前所有父元素的查找"td"的第一個的文本
$(this).parents().find("td").eq(0).text();
5、jQuery.data() 方法
data() 方法向被選元素附加數據，或者從被選元素獲取數據。
6、Java和JavaScript的初始數據的不同
var color;
alert(color)//顯示的是undefined
String color；//這個顯示的是null
注：建議用alert獲取JavaScript的初始數據
7、JavaScript動態添加元素如果不設定它的順序，它的順序就隨機出現
//翡翠寓意
setTimeout(function(){
$.ajax({
url:"ProductsSelect?action=Moral",
type:"get",
dataType:"json",
success:function (data) {
var $div="<div class='divproduer' style='margin-top: 23px;'>";
for (var i=0;i<data.length;i++){
var obj=data[i];
?
$div+="<span style='margin-right: 15px; cursor:pointer;' class='sMoral'>"+obj.moral+"</span>";
}
$div+="</div>";
$("#top-right").append($div); //注：順序是隨機的
},
error:function (xhr,textStatus,errorThrown) { //失敗回調
alert("錯誤，"+textStatus+","+errorThrown);
}
})
}, 300);
8、select的name傳值，
<select name="education">
<option value="高中">高中</option>
<option value="專科">專科</option>
<option value="本科">本科</option>
<option value="博士">博士</option>
</select>
9、form提交方式
這樣不能將數據提交給后臺
<input type="button" value="批量刪除"/>
form表單中的傳遞方法有<button>和<input type="submit">兩種，他們的功能是一樣的
注：如果form沒有寫action屬性的話，就只能在url后面加"?title=..."數據，只不過使用<button>可以顯示"?title=..."，<input type="submit">不顯示
10、獲取子類數據
<body>
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<div class="selected">And Again</div>
?
<p>And One Last Time</p>
</div>
<!--children:孩子們-->
<script>alert($("div").children(".selected").eq(0).text());</script>
</body>
11、jq獲取相鄰元素的上一個或下一個
相鄰元素下一個
//只能獲取下一個
$(this).next().val();
//獲取全部下一個，這里指定元素
$(this).nextAll(".col-total").val();
相鄰元素上一個
//只能獲取上一個
$(this).prev().val();
//獲取全部上一個，這里指定元素
$(this).prevAll(".col-total").val();
12、JavaScript的return
retrun true； 返回正確的處理結果。
return false；返回錯誤的處理結果，終止處理。
return；把控制權返回給頁面。
?
<a href="abc.htm" onclick="return add_onclick()">Open</a>
注：如果函數 add_onclick() 返回 true, 那么 頁面就會打開 abc.htm；否則, (返回 false), 那么頁面不會跳轉到 abc.htm, 只會執行你的 add_onclick() 函數里的內容.
13、form改變路徑
//改變form表路徑
$("#souform").click(function () {
$("#form1").prop("action","/jstl/queryGoods");
$("#form1").submit();
})
14、在頁面里顯示另外一個頁面
<iframe src="頁面的路徑" width="97%" height="80%"></iframe>
15、排序和點擊時切換方法
html:
<input type="button" @click="compare2" value="排序"/> js：
var vm=new Vue({
el:"#app4",
data:{
fruits:[{
'name': 'abc',
'age': 20
},{
'name': 'cde',
'age': 19
},{
'name': 'dfc',
'age': 25
},{
'name': 'bde',
'age': 21
}],
biaoji:1//標記 },
methods:{
compare:function (property) {
//做標記，注這里可以使用this
if (this.biaoji==1){
this.biaoji=2;
} else {
this.biaoji=1;
} return function (a, b) {
//判斷是否等于1，注這里不能使用this，必須vm才行
var two;
if (vm.biaoji==1){
two=b[property] - a[property];
}else {
two=a[property] - b[property];
}
return two//排序
}
},
compare2:function () {
// alert(vm.fruits.age); vm.fruits.sort(vm.compare("age"))
}
} }) //項目：vue2_01
總結
以上是生活随笔為你收集整理的JavaScript新手经常遇到的问题（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS官方Sample大全
- 下一篇： gradle idea java ssm