jQuery常用知识

SanLuoWenHao

于 2019-03-01 17:05:29 发布

阅读量134

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_43045142/article/details/88063455

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery Learning Center
https://learn.jquery.com/

$( document ).ready()

<html>
<head>
    <script src="jquery.js"></script>
    <script>
    $( document ).ready(function() {
        console.log( "document loaded" );
    });
 
    $( window ).on( "load", function() {
        console.log( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://techcrunch.com"></iframe>
</body>
</html>

Selecting Elements
https://learn.jquery.com/using-jquery-core/selecting-elements/
The most basic concept of jQuery is to “select some elements and do something with them.” jQuery supports most CSS3 selectors, as well as some non-standard selectors. For a complete selector reference, visit the Selectors documentation on api.jquery.com.

//Selecting Elements by ID
$( "#myId" ); // Note IDs must be unique per page.
//link Selecting Elements by Class Name
$( ".myClass" );
//link Selecting Elements by Attribute
$( "input[name='first_name']" );
//link Selecting Elements by Compound CSS Selector
$( "#contents ul.people li" );
//link Selecting Elements with a Comma-separated List of Selectors
$( "div.myClass, ul.people" );

// Refining selections.
$( "div.foo" ).has( "p" );         // div.foo elements that contain <p> tags
$( "h1" ).not( ".bar" );           // h1 elements that don't have a class of bar
$( "ul li" ).filter( ".current" ); // unordered list items with class of current
$( "ul li" ).first();              // just the first unordered list item
$( "ul li" ).eq( 5 );              // the sixth
$( "#content" )
    .find( "h3" )
    .eq( 2 )
        .html( "new text for the third h3!" )
        .end() // Restores the selection to all h3s in #content
    .eq( 0 )
        .html( "new text for the first h3!" );

// Testing whether a selection contains elements.
<html>
<head>
    <script src="jquery.js"></script>
    <script>
    	$(document).ready(function(){
			var divs = $( "div.foo" )
			if ( divs.length > 0 ) {
				console.log("divs.length=" + divs.length);
			}
    	});
    </script>
</head>
<body>
	<div class="foo">
		AAAA
	</div>
</body>
</html>

Manipulating Elements 操纵元素
https://learn.jquery.com/using-jquery-core/manipulating-elements/

.html() – Get or set the HTML contents.
.text() – Get or set the text contents; HTML will be stripped.
.attr() – Get or set the value of the provided attribute.
.width() – Get or set the width in pixels of the first element in
the selection as an integer.
.height() – Get or set the height in pixels of the first element in
the selection as an integer.
.position() – Get an object with position information for the first
element in the selection, relative to its first positioned ancestor.
.val() – Get or set the value of form elements.

// Changing the HTML of an element.
$( "#myDiv p:first" ).html( "New <strong>first</strong> paragraph!" );

Place the selected element(s) relative to another element.
Place an element relative to the selected element(s).

.after()
.insertAfter()
.insertBefore()
.before()
.appendTo()
.append()
.prependTo()
.prepend()

// Moving elements using different approaches.
 
// Make the first list item the last list item:
var li = $( "#myList li:first" ).appendTo( "#myList" );
 
// Another approach to the same problem:
$( "#myList" ).append( $( "#myList li:first" ) );

Traversing 遍历
https://learn.jquery.com/using-jquery-core/traversing/

Parents
Children
Siblings

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <span class="subchild"></span>
        </div>
    </div>
    <div class="surrogateParent1"></div>
    <div class="surrogateParent2"></div>
</div>

// returns [ div.child ]
$( "span.subchild" ).parent();

// Selecting an element's direct children:
// returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ]
$( "div.grandparent" ).children( "div" );
 
// Finding all elements within a selection that match the selector:
// returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]
$( "div.grandparent" ).find( "div" );

// Selecting a next sibling of the selectors:
// returns [ div.surrogateParent1 ]
$( "div.parent" ).next();
 
// Selecting a prev sibling of the selectors:
// returns [] as No sibling exists before div.parent
$( "div.parent" ).prev();

Utility Methods 实用方法
https://learn.jquery.com/using-jquery-core/utility-methods/

$.trim()
$.each()
$.inArray()
$.extend()
$.proxy()

//$.trim()
// Returns "lots of extra whitespace"
$.trim( "    lots of extra whitespace    " );

//$.each()
$.each([ "foo", "bar", "baz" ], function( idx, val ) {
    console.log( "element " + idx + " is " + val );
});
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
    console.log( k + " : " + v );
});

//$.inArray()
var myArray = [ 1, 2, 3, 5 ];
if ( $.inArray( 4, myArray ) !== -1 ) {
    console.log( "found it!" );
}