-JQuery distal base selector

Chapter 2 selector

jQuery selectors jQuery is a set of methods to provide us, let us be more convenient to get to the elements on the page. Note: jQuery selector returns the jQuery object.

jQuery selectors have a lot, basically compatible with all CSS selectors, jQuery and also added a lot more complex selector. (See jQuery documentation)

Although many jQuery selector, but between the selector can substitute for each other, that is to obtain an element, you will have a variety of methods to get. So we really can usually just a few of the most common selector.

2.1 jQuery basic selector (focus)

name	usage	description
ID selector	$(’#id’);	Gets the element specified ID
Class selector	$(’.class’);	Getting an element of the same type of class
Tag selector	$(‘div’);	Get all elements of the same class label
And set selector	$ ( 'Div, p, it');	Use commas to separate, it meets one of the conditions can be.
Intersection selector	$(‘div.redClass’);	Get the class to the div element redClass

• Summary: use css selector with exactly the same.

Syntax Template: 00- syntax template .html (need to include jquery.js)

<script type="text/javascript">
	//常用选择器
	//根据id获取元素 获取到的结果：类数组对象
	console.log( $('#div0') );
	console.log( $('#div0')[0] );
	//根据class获取元素
	console.log( $('.div_1') );
	//根据标签名称来获取元素
	console.log( $('div') );
	//根据属性获取元素
	console.log( $('input[name=username]') );
	//根据表单元素属性获取元素
	console.log( $(':checked') );
</script>

2.2 jQuery selector level (Key)

name	usage	description
Descendant selector	$(‘ul > li’);	Use - No, get the elements of the hierarchy son, pay attention, and do not get the elements grandson level
Descendant selectors	$(‘ul li’);	Use spaces, on behalf of descendant selectors, get all the elements in the li ul, including grandchildren, etc.

• Exactly like CSS selectors.

2.3 jQuery filter selector (mainly Learn)

• Such selectors have brought a colon:

name	usage	description
:eq（index）	$(‘li:eq(2)’).css(‘color’, ‘red’);	Acquired li element, selected element index number 2, the index from index number zero.
:odd	$(‘li:odd’).css(‘color’, ‘red’);	Acquired li element, the element selected odd index number
:even	$(‘li:even’).css(‘color’, ‘red’);	Acquired li element, selected element index number is an even number

2.4 jQuery screening methods (focus)

• Filter Selector function of the filter selector somewhat similar, but not the same usage, filter selector primarily methods.

name	usage	description
children(selector)	$(‘ul’).children(‘li’)	Equivalent to $ ( 'ul-li'), the selector subclass
find(selector)	$(‘ul’).find(‘li’);	Equivalent to $ ( 'ul li'), descendant selectors
siblings(selector)	$(’#first’).siblings(‘li’);	Find a sibling, not including himself.
parent()	$(’#first’).parent();	Find a father
eq(index)	$(‘li’).eq(2);	Equivalent to $ ( 'li: eq (2)'), index starts from 0
next()	$(‘li’).next()	Find the next sibling
prev()	$ ( 'Li'). Prev ()	To find the last time the brothers
closest	$(‘li’).closest(‘ul’)	Find the most recent ancestor

Syntax Template: 00- syntax template .html (need to include jquery.js)

<script type="text/javascript">
    //常用筛选方法
    //获取爱好对应的div
    var hobby = $('#hobby');
    //获取 hobby 父元素
    console.log( $('#hobby').parent() );
    //获取 hobby 子元素
    console.log( $('#hobby').children() );
    //获取 hobby 最近的祖先元素
    console.log( $('#hobby').closest('form') );
    //获取 hobby 所有后代元素
    console.log( $('#hobby').find('input') );
    //获取 hobby 下一个兄弟元素
    console.log( $('#hobby').next() );
    //获取 hobby 前一个兄弟元素
    console.log( $('#hobby').prev() );
    //获取 hobby 所有兄弟元素
    console.log( $('#hobby').siblings() );
</script>