Home > Article > Web Front-end > Summary of basic knowledge of jQuery_jquery
1、基础
jquery对象集:
$():jquery对象集合
获取jquery对象集中的元素:
使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0]
使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0)
使用jquery的eq方法获取jquery对象集中的jquery对象元素:
$('img[alt]').eq(0)
$('img[alt]').first()
$('img[alt]').last()
jquery对象集转换成javascript数组:
var arr = $('label+button').toArray()label后面所有同级button元素,转换成javascript数组
jquery对象集的索引:
var n = $('img').index($('img#id')[0])注意:index()参数是javascript元素
var n = $('img').index('img#id') 等同于上一行 找不到返回-1
var n = $('img').index()img在同级元素中的索引
向jquery对象集中添加更多的jquery对象集:
使用逗号:$('img[alt],img[title]')
使用add方法:$('img[alt]').add('img[title]')
对不同的jquery对象集中采取不同的方法:
$('img[alt]').addClass('thickBorder').add('img[title]').addClass('');
向jquery对象集中添加新创建的元素:
$('p').add('
Delete elements from jquery object set:
$('img[title]').not('[title*=pu]')
$('img').not(function(){return !$(this).hasClass('someClassname')})
Filter jquery object set:
$('td').filter(function(){return this.innerHTML.match(^d $)}) filters td
containing numbers
Get a subset of jquery object set
$('*').slice(0,4) A new jquery object set containing the first 4 elements
$('*').slice(4) A new jquery object set containing the first 4 elements
$('div').has('img[alt]')
Convert elements in jquery object set
var allIds = $('div').map(function(){
Return (this.id==undefined) ? null : this.id;
}).get();Convert to javascript array through get method
Traverse the elements in the jquery object set
$('img').each(function(n){
This.alt = 'This is the [' n ']th picture, the id of the picture is' this.id;
})
$([1,2,3]).each(function(){alert(this);})
Use the relationship between elements to obtain a jquery object set
$(this).closest('div') For example, in which div the triggered button occurs
$(this).siblings('button[title="Close"]')All sibling elements, excluding itself
$(this).children('.someclassname')All child node elements, excluding duplicate child nodes
$(this).closest('') is adjacent to the ancestor element
$(this).contents() is a set of jquery objects composed of element contents. For example, you can get the
Other ways to get jquery object set
$(this).find(p span)
Determine whether it is a jquery object set
var hasImg = $('*').is('img');
jquery method:
$().hide()
$().addClass('')
$().html('')
$('a').size()Number of elements
jquery selector:
$('p:even')
$('tr:nth-child(1)')
$('body > div') direct child element
$('a[href=$='pdf']')Select
based on attributes
$(div:has(a)) filter
jquery function:
$.trim()
jquery execution time:
$(document).ready(function(){});
$(function(){});
Create DOM element:
$('
jquery tests whether the element exists:
if(item)(){}else{} loose test
If(item != null) Recommended test, can distinguish null and undefined
2. Select the element to be operated
According to tag name: $('a')
Based on id: $('#id')
According to the class name: $('.someclassname')
Meet multiple conditions: $('a#id.someclassname') or $('div,span')
All child nodes of an element: $(p a.someclassname)
Direct child node of an element: $(ul.myList > li)
According to attribute name:
$(a[href^='http://']) starts with...
$(href$='.pdf') ends with...
$(form[method]) form
containing method attribute
$(intput[type='text'])
$(intput[name!=''])
$(href*='some')contains
The first element after a certain element: $(E F) matches F, and F is the first element after E
An element after a certain element: $(E~F) matches F, and F is an element after E
Passing position:
$(li:first)The first li
$(li:last)last li
$(li:even)even row li
$(li:odd)odd line li
$(li:eq(n))The nth element, index starts from 0
$(li:gt(n))The elements after the nth element, the index starts from 0
$(li:lt(n))The element before the nth element, the index starts from 0
$(ul:first-child)The first li
in the list
$(ul:last-child)The last li in the list
$(ul:nth-child(n))The nth li
in the list
$(ul:only-child)ul without brother li
$(ul:nth-child(even))The even row li in the list, odd is the count row li
$(ul:nth-child(5n 1))li
in the list divided by 5 with remainder 1
By filter:
$(input:not(:checkbox))
$(':not(img[src*="dog"])')
$('img:not([src*="dog"])')
$(div:has(span))
$('tr:has(img[src$="pu.png"])')
$(tr:animated)tr
in animated state
$(input:button) includes Input
of type button, reset, submit
$(input:checkbox) is equivalent to $(input[type=checkbox])
$(span:contains(food))span
containing the text food
$(input:disabled)disable
$(input:enabled)Enable
$(input:file) is equivalent to $(input[type=file])
$(:header)h1 to h6
$(input:hidden)
$(input:image) is equivalent to $(input[type=image])
$(:input) includes input, select, textarea, button elements
$(tr:parent)
$(input:password) is equivalent to $(input[type=password])
$(input:radio) is equivalent to $(input[type=radio])
$(input:reset) is equivalent to $(input[type=reset]) or $(button[type=reset])
$('.clssname:selected')
$(input:submit) is equivalent to $(input[type=submit]) or $(button[type=submit])
$(input:text) is equivalent to $(input[type=text])
$(div:visible)
3. Processing DOM elements
Manipulate the attributes of elements:
$('*').each(function(n){
This.id = this.tagName n;
})
Get attribute value: $('').attr('');
Set attribute value:
$('*').attr('title', function(index, previousValue){
Return previousValue ' I am element ' index ' and my name is ' this.id;
}) Set a value for an attribute
$('input').attr({
Value: '',
title: ''
}); Set values for multiple attributes
Delete attributes:
$('p').removeAttr('value');
Make all links open in new windows:
$('a[href^="http://"]').attr('target',"_blank");
Avoid submitting the form multiple times:
$("form").submit(function(){
$(":submit", this).attr("disabled","disabled");
})
Add class name: $('#id').addClass('')
Delete class name: $('#id').removeClass('')
Switch class name: $('#id').toggleClass('') delete the class name if it exists, add the class name if it does not exist
Determine whether it contains a class name: $('p:first').hasClass('') $('p:first').is('')
Returns a list of class names in array form:
$.fn.getClassNames = function(){
var name = this.attr('someclsssname');
if(name != null){
Return name.split(" ");
}
else
{
Return [];
}
}
Set style:
$('div.someclassname').css(function(index, currentWidth){
Return currentWidth 20;
});
$('div').css({
Cursor: 'pointer',
Border: '1px solid black',
Padding: '12px 12px 20px 20x',
bacgroundColor: 'White'
});
About size:
$(div).width(500)
$('div').height()
$('div').innerHeight()
$('div').innerWidth()
$('div').outerHeight(true)
$('div').outerWidth(false)
About positioning:
$('p').offset() reference position relative to the document
$('p').position() offsets the relative position of the parent element
$('p').scrollLeft() offset value of horizontal scroll bar
$('p').scrollLeft(value)
$('p').scrollTop()
$('p').scrollTop(value)
Relevant element content:
$('p').html()
$('p').html('')
$('p').text()
$('p').text('')
Additional content
Append a piece of html at the end of the element: $('p').append('some text');
Existing elements in the dom at the end of the element: $('p').append($(a.someclassname))
Append at the beginning of the element: $("p").prepend()
Append in front of the element: $("span").before()
Append after the element: $("span")after()
Append content to the end: appendTo(targets)
Append content to the beginning: prependTo(targets)
Append content to the front of the element: insertBefore(targets)
Append content to the end of the element: $('
Wrap element:
$('a.someclassname').wrap("
Delete element:
$('.classname').remove() deletes the element, and the events and data bound to the element will also be deleted
$('.classname').detach() deletes elements but retains events and data
$('.classname').empty() does not delete the element, but clears the element content
Copy element:
$('img').clone().appendTo('p.someclassname')
$('ul').clone().insertBefore('#id')
Replacement element:
$('img[alt]').each(function(){
$(this).replaceWith('' $(this).attr('alt') '');
})
$("p").replaceAll("")
About the value of the form element:
$('[name="radioGroup"]:checked').val() gets the value of the radio button. If one is not selected, it returns undefined
var checkboxValues = $('[name="checkboxGroup"]:checked').map(function(){
Return $(this).val();
}).toArray(); Get the value of the multi-select box
For