- $(function() {
- $('a').click(function() {
- // the methods of hiding or showing an element
- // in this section, you can try the following methods and see what happens
- // notice that the different type of parameters.
- $('#box').fadeOut();
- $('#box').fadeOut(3000);
- $('#box').fadeOut('slow);
- $('#box').slideUp('slow');
- $('#box').slideUp(3000);
- $('#box').hide(3000);
- $('#box').fadeIn('slow');
- $('#box').slideDown('slow');
- // here, you can change the element's css class properties
- $('p a').css('color', 'blue');
- });
- });
- $(function() {
- $('#box').click(function() {
- // Use the animate function to animate an element
- // you can change different properties splitted by comma
- $(this).animate({
- "left":"300px",
- "top":"300px",
- "width":"100px"
- })
- })
- });
- $(function() {
- // notice the different selectors
- $('ul li').css('color', 'red');
- $('ul li').addClass('alert');
- // select first
- $('ul li:first').addClass('alert');
- // select last
- $('ul li:last').addClass('alert');
- // select even items
- $('ul li:even').addClass('alert');
- // select odd items
- $('ul li:odd').addClass('alert');
- //this starts from the first child
- $('ul li:nth-child(6)').addClass('alert');
- // this is start from 0
- $('ul li:eq(5)').addClass('alert');
- // select items with XPATH
- $('ul li a[title=title]').addClass('alert');
- // select all the anchors under li as its children.
- $('ul li>a').addClass('alert');
- });
- $(function() {
- var i = $('li').size();
- // add an item to ul
- $('a#add').click(function() {
- $('<li>' + ++i + '</li>').appendTo('ul');
- }
- );
- // remove the last item.
- $('a#remove').click(function() {
- $('li:last').remove();
- });
- });
JQuery leaning note1
最新推荐文章于 2013-06-07 14:07:11 发布