阿小信大人的头像
Talk is cheap. Show me the code. Linus Torvalds

jQuery基础教程练习笔记2014-09-02 05:17

$是对标识符jQuery的一种简写。

用$()函数选择元素。

$('div')
$('#some-id')
$('.some-class')

$(document).ready()其中代码会在dom加载后立即运行

$(document).ready(function(){
    $('#selected-plays > li').addClass('horizontal');
    //查找id为#selected-plays元素的子元素(>)中所有的li,添加horizontal类

    $("#selected-plays li:not(.horizontal)").addClass('sub-level');
    //查找id为#selected-plays元素的后代元素为li,并没有horizontal类的
});

$(document).ready(function(){
    $('a[@href^="mailto:"]').addClass('mailto');  //a中含有href属性的,值为以mailto开头的
    $('a[@href$=".pdf"]').addClass('pdflink');  //a中含有href属性的,值为以.pdf格式结尾的
    $('a[@href*="sinaapp.com"]').addClass('mysite');  //a中含有href的,值为任意地方含有sinaapp.com的
});

//$('div.horizontal:eq(1)') 选择带有horizontal类的div集合中的第2个项

$(document).ready(function(){
    $('tr:odd').addClass('trodd');  //在下标为奇数行添加类
    $('tr:even').addClass('treven');  //在下标为偶数行添加类
    $('td:contains("C")').addClass('highlight');  //在包含字符C的列中添加类
});

$(document).ready(function(){
    $('th').parent().addClass('table-heading');
    //找到th的父元素

    $('tr:not([th]):even').addClass('treven');
    //$('tr').filter(':even').addClass('treven');

    $('tr:not([th]):odd').addClass('trodd');
    //$('tr').filter(':odd').addClass('trodd');

    $('td:contains("C++")').next().addClass('highlight');
    //取得包含C++列的后面的一列

    $('td:contains("HTML")').siblings().addClass('highlight');
    //取得包含HTML列的同辈元素(除本身以外同行的所有列)

    alert($('#testget').get(0).tagName);//TH
    //alert($('#testget')[0].tagName);
});

bind()方法第一个参数为事件类型,第二个参数为触发的事件处理函数

$("#some-id").bind('click', function(){});

toggle()方法两个参数都为函数。

第一次在元素上单击调用第一个函数,第二次单击触发第二个函数,此后,交替执行。

toggleClass()在事件中交替添加和移除class。

hover()函数接受两个参数也是函数,第一个在鼠标进入时调用,第二个在鼠标移除时调用。

事件处理程序中给function()传递event参数,event变量保存着事件对象

event.target保存有发生事件的目标元素

event.stopPropagation()可终止事件的继续传播

unbind()方法可以完全移除处理程序,第一个参数为事件名,第二个参数为要移除的处理函数对象

one()函数只触发一次就会自动移除

trigger()函数用于模拟事件,参数为事件名字符串。

必要的javascript知识:

parseFloat("123ashin")
123
parseFloat("123ashin456")
123
parseFloat("ashin456")
NaN

parseInt("101ashin", 2)
5
parseInt("101ashin", 8)
65
parseInt("101ashin", 10)
101
parseInt("101ashin", 16)
4122


"123ashin456".slice(3)
"ashin456"
"123ashin456".slice(-3)
"456"
"123ashin456".length
11
"123ashin456".split('a')
["123", "shin456"]

修改内联CSS

$(document).ready(function(){
    $('div.button').click(function(){
        var $text = $('div.text'); //$text:$是合法变量开头字符,这里突出它为jQuery变量
        var current_size = $text.css('font-size'); //获取字体大小:16px  font-size也可以写为fontSize
        //css()方法只有一个参数为getter,两个参数为setter,两种赋值方法:.css('property', 'value')、.css(propertyOne:'value', 'property_one':'value'),驼峰命名可以不加引号
        var num = parseFloat(current_size, 10);     //剥离出以数字开头的字符串中的数字,末尾字符除去,第二个参数为返回10进制数字。获得数字部分:16。
        var unit = current_size.slice(-2);     //切片16px的后两位:px

        //点击增大字体
        if (this.id == 'sl') {
            num *= 1.4;
        }
        //点击缩小字体
        else if(this.id == 'ss') {
            num /= 1.4;
        }

        $text.css('font-size', num+unit);
    });
});

隐藏和显示:hide()、show(),不加参数立即隐藏或显示。参数可以为:'slow','normal','fast'或者毫秒数。

//隐藏第二个段落
$('p:eq(1)').hide();

//点击显示
$('span.more').click(function(){
    $('p:eq(1)').show();
    $(this).hide();
});

淡入淡出效果(透明度):fadeIn(),fadeOut()。参数和hide、show一样。fadeTo(),接收两个参数,第一个是速度参数,第二个是不透明度(0-1)。

$('span.more').click(function(){
    $('p:eq(1)').fadeIn(500);
    $(this).hide();
);

多重效果:animate({样式属性键值对}, 速度, 缓动, 回调函数)

animate({height:'show', width:'show', opacity:'show'}, 'slow', function(){alert('hello')});

show:恢复到最初的值。

toggle:交替show和hide。

hide:隐藏。

也可为普通值。

$('div.button').animate({left:850, height:80}, 'slow');
$('div.button').animate({left:850}, 'slow').animate({height:80}, 'slow');

最终效果一样,但一个是并发,一个是排队。

$('div.label').click(function(){
    //$('div.button').animate({left:850}, 'slow');
    //$('div.button').animate({left:850}, 'slow').animate({height:80}, 'slow');
    $('div.button').fadeTo('slow', 0.5)//不透明度减为0.5,呈现半透明状
    .animate({left:650}, 'slow')       //向右移动650
    .fadeTo('slow', 1.0)               //完全不透明
    .slideUp('slow');                  //滑到上方至最终隐藏
});

$('p:eq(3)').css('background-color', '#fcf').hide();

$('p:eq(2)').css('background-color', '#cff').click(function(){
    $(this).slideUp('slow').next().slideDown('slow');//第三段收起隐藏,第四段下落显示。
});

回调函数:回调函数就是作为方法的参数传递一个普通函数。可用于解决css()方法在效果方法之后调用却无法最后显示的问题。

$('p:eq(3)').css('background-color', '#fcf').hide();

$('p:eq(2)').css('background-color', '#cff').click(function(){
    var $this_para = $(this);
    $this_para.next().slideDown('slow', function(){
        //$(this).slideUp('slow');//此处的$(this)是第四段,因为是在next后的slideDown方法中调用的。
        $this_para.slideUp('slow');
    });
});

$('div.label').click(function(){
    $('div.button').fadeTo('slow', 0.5)//不透明度减为0.5,呈现半透明状
    .animate({left:650}, 'slow')       //向右移动650
    .fadeTo('slow', 1.0, function(){
        $(this).css('background-color', '#f00')
    })               //完全不透明后变色。
    //.css('background-color', '#f00')//不用回调函数会直接先变色再移动
    .slideUp('slow');                  //滑到上方至最终隐藏
});

javascript知识点:

'asdsdasd'+1+2
"asdsdasd12"
'asdsdasd'+(1+2)
"asdsdasd3"

DOM操作

attr():访问和改变属性值,用法和css()相同。

removeAttr():删除属性。

each():参数为匿名函数,该函数传递一个index参数,默认会自增,用这个函数操作前面每个选择的元素。

text():获取前面选择的标签包含的值。加参数则为修改该值,但不会立即在页面呈现。

html():同text,无参返回html形式的文本,加参数修改文本,以html方式。

end():结束当前查询,返回到最初。

$():在括号中放入一组html元素后,通过insertAfter等方法就能改变整个DOM结构。

插入到其他元素前面:insertBefore()、before(),区别在于连缀方式。

插入到其他元素后面:insertAfter()、after(),区别在于连缀方式。

在其他元素中插入元素:prependTo()、prepend(),区别在于连缀方式。

appendTo():参数为已定义的容器,将前面选择的对象添加到该容器中,

append():在当前添加元素。

wrap():在前面选择的元素外面添加参数中的标签。

remove():移除每个匹配的元素及其后代元素。但不实际移除。

empty():移除每个匹配的元素

$(document).ready(function(){
    $('div.text a').attr({'rel':'external'});

    $('div.text a').each(function(index){
        $(this).attr({'title':'title-'+index, 'id':'link-'+index});
        //alert($(this).text());
    });

    //$('#link-0').removeAttr('href');
    //alert($('#link-0').attr('href'));
    //alert($("div > p").text());

    $('<a href="#top">back to top</a>').insertAfter('div.text div:gt(2)');

    $('div.text p').after("<p>after</p>");

    $('<a id="top">toptop</a>').prependTo('body');

    $('body').prepend("<p>pppp</p>");

    $('<ol id="notes"></ol>').insertAfter('div.text');

    $('span.footnote').each(function(index){
        $(this).before('<a href="#foot-note-' + (index+1) + '" id="context-' + (index+1) + '" class="context"><sup>' + (index+1) + '</sup></a>').appendTo('#notes').append('&nbsp;(<a href="#context-' + (index+1) +'">context</a>)').wrap('<li id="foot-note-' + (index+1) +'"></li>');
    });

    $('div.text div:eq(0)').clone().insertAfter('div.text p:eq(0)');

    $('div.text div:eq(0)').clone(false).insertAfter('div.text p:eq(0)');

    $('span.pull-quote').each(function(index){
        var $pp = $(this).parent('div');
        $pp.css('position', 'relative');
        $(this).clone().addClass('pulled').prependTo($pp);
    });

    $('span.pull-quote').each(function(index){
        var $cc = $(this).clone();

        $cc.find('span.drop')
        //alert(dt.text());
        .html('&hellip;')
        .end()
        .prependTo('body')
    });

    //$('div span.tt').remove();

    $('div span.tt').empty();

    alert($('div span.tt').text());
});

load():在指定位置加载html文件中的内容(Chrome本地文件不支持)。

全局函数:

$.getJSON():取得相应的JSON文件后返回一个文件内容对象给回调函数作为参数。

$.each():对第一个参数的对象用第二个(参数)回调函数作迭代处理。

$.getScript():加载运行js脚本,脚本中不能有<script>标签。

$.get():通常只是简单的取得参数指定的url文件的纯文本格式数据提供给回调函数,在服务器上会返回xmldom树

$.post():同上

ajaxStart()、ajaxStop():在ajax请求开始和结束之间执行各自的回调函数。

<script>
$(document).ready(function(){
    //加载html
    $('#letter-a .button').click(function(){
        $('#dict').load('loadbyc6.html');
        //$('#dict').hide().load('loadbyc6.html', function(){
            $(this).fadeIn('slow');
        });
    });

    //加载json数据,并用数据构造html页面。
    $('#letter-b .button').click(function(){
        $.getJSON('loa1dbyc6.json', function(data){              //回调函数提供等待数据返回的方式,而不是立即执行代码,回调函数的data参数保存在返回的数据
        $('#dict').empty(); //清空原有内容
        $.each(data, function(entry_index, entry){
                var html = '<div class="entry">';          //构建html
                html += '<h3 class="term">' + entry['term'] + '</h3>';  //Python字典方式取值并嵌入html
                html += '<div class="part">' + entry['part'] + '</div>';
                html += '<div class="tt">';
                html += entry['tt'];
                html += '</div>';
                html += '</div>';
                $('#dict').append(html);
            });
        });
    });

    //加载运行js脚本,脚本不要有<script>标签
    $('#letter-c .button').click(function(){
        $.getScript('loadbyc6.js');
    });

    //加载xml
    $('#letter-d .button').click(function(){
        $.get('loadbyc6.xml', function(data){
            $('#dict').empty();
            $(data).find('entry').each(function(){
                var $entry = $(this);
                var html = '<div class="entry">';   
                html += '<h3 class="term">' + $entry.attr('term') + '</h3>'; 
                html += '<div class="part">' + $entry.attr('part') + '</div>';
                html += '<div class="tt">';
                html += $entry.find('tt').text();
                html += '</div>';
                html += '</div>';
                $('#dict').append($(html));
            });
        });
    });

    $('#loading').ajaxStart(function(){
        $(this).show();
    }).ajaxStop(function(){
        $(this).hide();
    });
});
</script>

如果您觉得从我的分享中得到了帮助,并且希望我的博客持续发展下去,请点击支付宝捐赠,谢谢!

若非特别声明,文章均为阿小信的个人笔记,转载请注明出处。文章如有侵权内容,请联系我,我会及时删除。

#WEB/前端#   #jquery
分享到:
阅读[1080] 评论[0]

你可能也感兴趣的文章推荐

本文最近访客

发表评论