What are selectors in jQuery?
A jQuery selectors selects or finds a DOM element in an HTML document. It is used to select HTML elements based on id, name, types, attributes, class etc.
popular selectors
Example: $(":input[type='button']") , $(":input[type='radio']")
ID and Class selectors
In this tutorial only ID and class selectors are explained. If we select element by its id the we need to use $('#element_id') and if we access element by class name then we need to use $('.ClassName')
popular selectors
- Id selectors
- Class selectors
- Element selectors
- Attribute selectors
Example: $(":input[type='button']") , $(":input[type='radio']")
ID and Class selectors
In this tutorial only ID and class selectors are explained. If we select element by its id the we need to use $('#element_id') and if we access element by class name then we need to use $('.ClassName')
# Example
Replace your html code with below code and try to show alert on button click in Jquery
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
//Class selector example
$(".div1,.div2").css({ "border": "2px solid red", "padding": "10px" });
//Id selector example
// $("#myDiv").css({ "border": "2px solid blue", "padding": "10px" });
})
</script>
</head>
<body>
<div id="myDiv" class="div1" style="margin-bottom:50px;padding:10px">
<button>click</button>
<span>child1 </span>
</div>
<div class="div2" style="padding:10px">
<button>click</button>
<span>child2 </span>
</div>
</body>
</html>
No comments:
Post a Comment