JQuery 基础教程练习笔记

 2012-05-01  |  6 分钟  |  2889 个字  |  axiaoxin
文章目录

jQuery 基础用法示例

用 $() 函数选择元素，$ 是对标识符 jQuery 的一种简写

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

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

示例1：

$(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类的
});

示例2：

$(document).ready(function(){
    $('a[@href^="mailto:"]').addClass('mailto');
    // a中含有href属性的，值为以mailto开头的

    $('a[@href$=".pdf"]').addClass('pdflink');
    // a中含有href属性的，值为以.pdf格式结尾的

    $('a[@href*="axiaoxin.com"]').addClass('mysite');
    // a中含有href的，值为任意地方含有axiaoxin.com的
});

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

示例3：

$(document).ready(function(){
    $('tr:odd').addClass('trodd');
    // 在下标为奇数行添加类

    $('tr:even').addClass('treven');
    // 在下标为偶数行添加类

    $('td:contains("C")').addClass('highlight');
    // 在包含字符C的列中添加类
});

示例4：

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

jQuery 事件处理

  • 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"]

使用 jQuery 修改内联 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({样式属性键值对}, 速度, 缓动, 回调函数)

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

show：恢复到最初的值。

toggle：交替show和hide。

hide：隐藏。

也可为普通值。

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

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

:::javascript
$('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()方法在效果方法之后调用却无法最后显示的问题。

:::javascript
$('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知识点：

:::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():移除每个匹配的元素

:::javascript
$(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请求开始和结束之间执行各自的回调函数。

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

关注我

 编程  jquery

也可以看看

全国大流量卡免费领

19元月租ㆍ超值优惠ㆍ长期套餐ㆍ免费包邮ㆍ官方正品