TryjQuery官方jQuery视频学习笔记（二）

继续昨天的内容，直接上代码。

    $(“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");
      });
    });
    

最近还在做公司系统的类设计，明天将总结写一篇自己对类设计的一些看法。

评论

3 楼 EdgarRZeng 2013-08-22  

303178394 写道

EdgarRZeng 写道

你好，我是最近才开始学习Jquery的，请问下你是用什么工具来编辑和调试Jquery的呢？谢谢咯。

IntelliJ IDEA在这方面提示功能比较好，不过我还是用eclipse，然后导入到IntelliJ中，比较复杂的时候就用idea同步修改。
调试的话我用firebug。

嗯。好的。我在写java，用的也是eclipse，不过感觉还是不是很方便额。额，可能是我安装的插件不行吧。谢谢了。

2 楼 303178394 2013-08-22  

EdgarRZeng 写道

你好，我是最近才开始学习Jquery的，请问下你是用什么工具来编辑和调试Jquery的呢？谢谢咯。

IntelliJ IDEA在这方面提示功能比较好，不过我还是用eclipse，然后导入到IntelliJ中，比较复杂的时候就用idea同步修改。
调试的话我用firebug。

1 楼 EdgarRZeng 2013-08-22  

你好，我是最近才开始学习Jquery的，请问下你是用什么工具来编辑和调试Jquery的呢？谢谢咯。