继续昨天的内容,直接上代码。
最近还在做公司系统的类设计,明天将总结写一篇自己对类设计的一些看法。
$(“li”).text(“aaa”);//所有li标签的内容变成aaa
$(“#id”).text(); //返回id=”id”的标签的内容
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");//这样去创建DOM对象。
$('.vacation').before(message );//message放在class=vacation之前
$('.vacation').after(message );//message放在class=vacation之后
$('.vacation').prepend(message );//message放在class=vacation的第一个节点
$('.vacation').append(message );//message放在class=vacation的最后一个节点
message.appendTo( $('.vacation'))//这4个方法和上面类似,有的人可能觉得这样可读性更好
message.prependTo( $('.vacation'))
message.insertAfter( $('.vacation'))
message.insertBefore( $('.vacation'))
$(‘button’).remove(); //删除某个元素
$(‘button’).on(‘click’,function(){
});//点击事件
//注意on方法是之后版本的jQuery才有的,.bind() .live() .delegate() 方法结合就是on()了,具体应该是在1.8以后的版本
//鼠标事件有click,focusin,mousedown,mousemove,mouseover,mouseenter(鼠标进入),dblclick,focusout,mouseup,mouseout,mouseleave
$(‘.usa’).data(‘xxx’)//html5的标签元素<li class="usa tour" data-xxx="1" >可以通过data来获取值
$(‘.vacation’).on(‘click’,’button’,function(){ …});//可以用这种方式来给class=vacation下的Button添加事件.个人比较喜欢这种写法
$(‘.usa’).addClass(‘class’);
$(‘.usa’).removeClass(‘class’);// 增加去除选择元素的class
$(‘.usa’).toggleClass(‘class’) ;// 滚动的增加去除
$(‘.usa’).slideDown();//出现
$(‘.usa’).slideUp();//消失
$(‘.usa’).slideToggle();//出现消失轮流触发
//键盘事件keypress,keydown,keyup
//表单事件blur,select,change,focus,submit
var price = +$('#price').text();//转化成数字类型
$('#price').val();//获取标签中的value属性
//fadeIn fadeOut fadeToggle 淡入淡出效果
$(this).css(‘display,’none’);//改变css样式
$(this).css(‘display,null);//删除
$(this).animate({'top','-10px'},400);//在400ms内向上移动10个像素,400也可以改成fast
$(document).ready(function() {
$('.tour').on('mouseenter', function() {
$(this).addClass('highlight');
$(this).find('.per-night').animate({'opacity': '1'});
});
$('.tour').on('mouseleave', function() {
$(this).removeClass('highlight');
});
});//动画改变透明度
$("li").each(function(){str += $(this).text()})//遍历
$(document).ready(function() {//tour在上层
$(".see-photos").on("click", function(event) {
event.stopPropagation();//阻止冒泡到DOM树上,也就是不触发任何前辈事件的处理函数
event.preventDefault();//阻止某人行为,否则在下端点的按钮,会跳到页面的顶端
$(this).closest(".tour").find(".photos").slideToggle();
});
$(".tour").on("click", function() {
alert("This should not be called");
});
});
最近还在做公司系统的类设计,明天将总结写一篇自己对类设计的一些看法。