Selector Role:
So that we can more accurately find the elements we want to operate
***** "a" basic selector
- ID selector: name #ID
- class selector: name begins with the class.
- an element selector: name tag
- Wildcard Selector: *
- selector, the selector: selector 1, selector 2
Case ##### basic selector
JavaScript ---------- -----------
<Script>
// document load event, the page initialization operations
$ (function () {
// initialization: to button binding event
$ ( "# btn1") the Click (function () {.
$ ( "# TWO") CSS ( "background-Color", "PaleGreen");.
});
// find all elements of mini class
$ ( "# btn2") the Click (function () {.
$ ( "Mini.") CSS ( "background-Color", "PaleGreen");.
});
$ (. "# btn3") the Click (function () {
$ ( "div"). css ( "background-color", "palegreen");
});
$("#btn4").click(function(){
$("*").css("background-color","palegreen");
});
/*选择器分组*/
//找出mini类 和 span元素
$("#btn5").click(function(){
$(".mini,span").css("background-color","palegreen");
});
});
</script>
```
****** "two" level selector
- The child element of choice: Select 1> select 2
- descendant selector: Selector 1 grandchildren
- adjacent sibling selector: Selector Selector 1 + 2: Find the next one brother
- find all brother : selector 1 selector 2: find out all brother
`` HTML `
<Script>
// document load event, the page initialization operations
$ (function () {
// initialization: bind events to the buttons
// find body following sub-div
$ (" # btn1 "). the Click (function () {
$ ( "body> div") CSS ( "background-Color", "PaleGreen");.
});
// find the body following all div
$ ( "# btn2") the Click (. function () {
$ ( "body div") CSS ( "background-Color", "PaleGreen");.
});
$ (. "# btn3") the Click (function () {
$ ( "# One + div" ) .css ( " background-color","palegreen");
});
$("#btn4").click(function(){
$("#two~div").css("background-color","palegreen");
});
});
</script>
***** attribute selectors
```html
$(function(){
//找到有name属性的input
$("#btn1").click(function(){
$("input[name]").attr("checked",true);
});
$("#btn2").click(function(){
$("input[name='accept']").attr("checked",true);
});
$("#btn3").click(function(){
$("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
});
});
```
Form Filler *****
```html
<script>
//1.文档加载事件
$(function(){
$(":text").css("background-color","pink");
});
</script>
