Elements class

优质

小牛编辑

135浏览

2023-12-01

这些API方法与jQuery DOM操作API方法完全一致，具体可以查看jQuery手册

属性操作

Example

QueryList::html($html)->find('a')->attr('href', 'newVal')->removeClass('className')->html('newHtml')->...

Attr
Class
HTML
Text
Value
Attr
attr($name) Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned.
attr($properties) Set a key/value object as properties to all matched elements.
attr($key, $value) Set a single property to a value, on all matched elements.
attr($key, $fn) Set a single property to a computed value, on all matched elements.
removeAttr($name) Remove an attribute from each of the matched elements.
Class
addClass($class) Adds the specified class(es) to each of the set of matched elements.
hasClass($class) Returns true if the specified class is present on at least one of the set of matched elements.
removeClass($class) Removes all or the specified class(es) from the set of matched elements.
toggleClass($class) Adds the specified class if it is not present, removes the specified class if it is present.
HTML
html() Get the html contents (innerHTML) of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).
html($val) Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
Text
text() Get the combined text contents of all matched elements.
text($val) Set the text contents of all matched elements.
Value
val() Get the content of the value attribute of the first matched element.
val($val) Set the value attribute of every matched element.
val($val) Checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.

Read more at Attributes section on jQuery Documentation Site.

遍历操作

Example

QueryList::html($html)->find('div > p')->add('div > ul')->filter(':has(a)')->find('p:first')->nextAll()->andSelf()->...

Filtering
Finding
Chaining
Filtering
eq($index) Reduce the set of matched elements to a single element.
hasClass($class) Checks the current selection against a class and returns true, if at least one element of the selection has the given class.
filter($expr) Removes all elements from the set of matched elements that do not match the specified expression(s).
filter($fn) Removes all elements from the set of matched elements that does not match the specified function.
is($expr) Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.
map($callback) Translate a set of elements in the jQuery object into another set of values in an array (which may, or may not, be elements).
not($expr) Removes elements matching the specified expression from the set of matched elements.
slice($start, $end) Selects a subset of the matched elements.
Finding
add($expr) Adds more elements, matched by the given expression, to the set of matched elements.
children($expr) Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
contents() Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
find($expr) Searches for all elements that match the specified expression. This method is a good way to find additional descendant elements with which to process.
next($expr) Get a set of elements containing the unique next siblings of each of the given set of elements.
nextAll($expr) Find all sibling elements after the current element.
parent($expr) Get a set of elements containing the unique parents of the matched set of elements.
parents($expr) Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element). The matched elements can be filtered with an optional expression.
prev($expr) Get a set of elements containing the unique previous siblings of each of the matched set of elements.
prevAll($expr) Find all sibling elements before the current element.
siblings($expr) Get a set of elements containing all of the unique siblings of each of the matched set of elements. Can be filtered with an optional expressions.
Chaining
andSelf() Add the previous selection to the current selection.
end() Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state (right before the destructive operation).

Read more at Traversing section on jQuery Documentation Site.

DOM操纵

Example

QueryList::html($html)->find('div.old')->replaceWith( $ql->find('div.new')->clone() )->appendTo('.trash')->prepend('Deleted')->...

Changing Contents
Inserting Inside
Inserting Outside
Inserting Around
Replacing
Removing
Copying
Changing Contents
html() Get the html contents (innerHTML) of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).
html($val) Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
text() Get the combined text contents of all matched elements.
text($val) Set the text contents of all matched elements.
Inserting Inside
append($content) Append content to the inside of every matched element.
appendTo($content) Append all of the matched elements to another, specified, set of elements.
prepend($content) Prepend content to the inside of every matched element.
prependTo($content) Prepend all of the matched elements to another, specified, set of elements.
Inserting Outside
after($content) Insert content after each of the matched elements.
before($content) Insert content before each of the matched elements.
insertAfter($content) Insert all of the matched elements after another, specified, set of elements.
insertBefore($content) Insert all of the matched elements before another, specified, set of elements.
Inserting Around
wrap($html) Wrap each matched element with the specified HTML content.
wrap($elem) Wrap each matched element with the specified element.
wrapAll($html) Wrap all the elements in the matched set into a single wrapper element.
wrapAll($elem) Wrap all the elements in the matched set into a single wrapper element.
wrapInner($html) Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
wrapInner($elem) Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
Replacing
replaceWith($content) Replaces all matched elements with the specified HTML or DOM elements.
replaceAll($selector) Replaces the elements matched by the specified selector with the matched elements.
Removing
empty() Remove all child nodes from the set of matched elements.
remove($expr) Removes all matched elements from the DOM.
Copying
clone() Clone matched DOM Elements and select the clones.
clone($true) Clone matched DOM Elements, and all their event handlers, and select the clones.

Read more at Manipulation section on jQuery Documentation Site.

form表单序列化

serialize() Serializes a set of input elements into a string of data. This will serialize all given elements.

serializeArray() Serializes all forms and form elements (like the .serialize() method) but returns a JSON data structure for you to work with.

例子：操作github登录表单

$form = QueryList::get('https://github.com/login')->find('form');

$form->find('input[name=login]')->val('github user');
$form->find('input[name=password]')->val('github password');

$data = $form->serialize();
print_r($data);

$data = $form->serializeArray();
print_r($data);

输出:

0%5Bname%5D=utf8&0%5Bvalue%5D=%E2%9C%93&1%5Bname%5D=authenticity_token&1%5Bvalue%5D=EKXMN7xae%2BFZBv8r3y8qO2ICAwjAm9wfVt0S%2F9G7YuB2B7h%2Biw%3D%3D&2%5Bname%5D=login&2%5Bvalue%5D=github+user&3%5Bname%5D=password&3%5Bvalue%5D=github+password&4%5Bname%5D=commit&4%5Bvalue%5D=Sign+in

Array
(
    [0] => Array
        (
            [name] => utf8
            [value] => ?
        )

    [1] => Array
        (
            [name] => authenticity_token
            [value] =>EKXMN7xae+FZBv8r3y8qO2ICAwjAm9wfVt0S/9G7YuB2B7h+iw==
        )

    [2] => Array
        (
            [name] => login
            [value] => github user
        )

    [3] => Array
        (
            [name] => password
            [value] => github password
        )

    [4] => Array
        (
            [name] => commit
            [value] => Sign in
        )

)

Elements class

属性操作

Example

Table of Contents

Attr

Class

HTML

Text

Value

遍历操作

Example

Table of Contents

Filtering

Finding

Chaining

DOM操纵

Example

Table of Contents

Changing Contents

Inserting Inside

Inserting Outside

Inserting Around

Replacing

Removing

Copying

form表单序列化

例子：操作github登录表单