jQuery DOM操作方法介绍

2019-03-02  本文已影响0人  原上的小木屋

以下jQuery方法有什么作用？如何使用？给出范例

  1. .append()
$('.inner').append('<p>Test</p>');
$('body').append($newdiv1,[ newdiv2,existingdiv1 ]);
$('p').append('<strong>Hello</strong>')
$('p').append($('strong'))
$('p').append(document.creaTextNode('Hello'))
  1. .prepend()
$('.inner').prepend('<p>Test</p>')// 向class值为inner元素的头部（内部）添加内容'<p>Test</p>'
  1. .before()
$('.inner').before('<p>Test</p>')
$('.container').before($('h2'))
$('p').first().before( newdiv1, [ newdiv2, existingdiv1])
$('p').before('<b>Hello</b>')
$('p').before(document.createTextNode('Hello'))
  1. .after()
$('.inner').after('<p>Test</p>') //在class值为inner的元素后面添加兄弟元素'<p>Test</p>'
$('p').after( document.createTextNode('Hello'))//
  1. .remove()
$('#div1').remove() //删除id为div1的元素及其子元素
$('div').remove('.test')//删除带有class值为test的div元素
  1. .empty()
  1. .html()
$('div').html() //获取所选元素的innerHTML
$('div').html('123')//将所选元素的innerHTML设置为‘123’
  1. .text()

$node.text()和$node.html()有什么区别？

介绍以下 jQuery 函数的用法，给出范例

  1. .val()
$('input').val()
$('input').val('newValue');
  1. .attr()
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
$( "#greatphoto" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});
$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});
  1. .removeAttr()
  1. .prop()/.removeProp()
  1. .css()
$( "div.example" ).css( "width", function( index ) {
    return index * 50;
});
$( this ).css( "width", "+=200" );
$( this ).css( "background-color", "yellow" );
$( this ).css({
  "background-color": "yellow",
  "font-weight": "bolder"
});
  1. .addClass()
$( "p" ).addClass( "myClass yourClass" );
$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});
  1. .removeClass()
$( "p" ).removeClass( "myClass yourClass" );
$( "li:last" ).removeClass(function() {
  return $( this ).prev().attr( "class" );
});
  1. .hasClass()
  1. .toggleClass()
<div class="tumble">Some text.</div>`
第一次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
第二次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>

jQuery 对象和原生 Dom 对象有什么区别？如何相互转换？

  1. DOM 对象===>jQuery,加$符号
var dom = document.getElementById("id");//DOM对象
var $dom = $(dom);//jq对象
  1. jQuery==>DOM对象,后面加[0]即可完成转换
var $dom = $("#id");//jq对象
var dom = $dom[0];//DOM对象

介绍以下 jQuery 方法的用法，给出范例

  1. .each()
var obj = { "flammable":"inflammable", "duh":"no duh"};
$.each(obj,function(key,value){alert(key + ":" +value);})
  1. $.extend()
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
}; // Merge object2 into object1
$.extend( object1, object2 );
  1. .clone()
$('.hello').appendTo('.goodbye');
<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>
  1. .index()
var listItem = $( "#bar" );
alert( "Index: " + $( "li" ).index( listItem ) );
  1. .ready()
$(document).ready(handler)
$(handler)

window.onload和$(document).ready有什么区别？document.onDOMContentLoaded呢?

  1. 执行时间
  1. 方法个数
  1. 简化写法

jQuery实现点击icon后切换播放和暂停两种状态

<!DOCTYPE html>
<html lang='en'>
<head>
    <link rel='stylesheet' href='http://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css'>
    <script src='http://cdn.bootcss.com/jquery/3.3.1/jquery.js'>
    <meta charset="UTF-8">
    <title>icon-change</title>
    <style>
        .fa{
            color:red;
            font-size: 40px;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div class="fa fa-pause"></div>
    <script>
        $('.fa').on('click',function(){$('.fa').toggleClass('fa-play')})
        $('.fa').on('click',function(){$('.fa').toggleClass('fa-pause')})
    </script>
</body>
</html>
上一篇下一篇

猜你喜欢

热点阅读