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>
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