jQuery syntax
jQuery syntax works by selecting HTML elements and performing some action on the selected elements.
Basic syntax: $( selector ) .action ()
- dollar sign defines jQuery
- selector (selector) "query" and "find" HTML elements
- jQuery's action() performs actions on elements
Example:
$(this).hide() - hides the current element
$("p").hide() - hides all <p> elements
$("p.test").hide() - hides all <p> elements with class="test"
document ready event
You may have noticed that all the jQuery functions in our example are in a document ready function:
$ ( document ) . ready ( function ( ) { // Start writing jQuery code... } ) ;This is to prevent jQuery code from running until the document is fully loaded (ready), ie the DOM cannot be manipulated until the DOM is loaded.
If the function is run before the document is fully loaded, the operation may fail. Here are two specific examples:
- Trying to hide an element that doesn't exist
- Get the size of an image that is not fully loaded
Tip: Concise writing (same effect as above):
$ ( function ( ) { // Start writing jQuery code... } ) ;In the above two ways, you can choose the way you like to implement the jQuery method when the document is ready.
$("#test").hide() - hides all elements with id="test"
-----------------------------------------------------------------------------------------------------------------------------
jQuery selectors
jQuery selectors allow you to operate on groups of HTML elements or individual elements.
jQuery selectors "find" (or select) HTML elements based on their id, class, type, attribute, attribute value, etc. It's based on existing CSS selectors, and in addition, it has some custom selectors.
All selectors in jQuery start with a dollar sign: $().
element selector
jQuery element selectors select elements based on element names.
To select all <p> elements in the page:
example
After the user clicks the button, all <p> elements are hidden:
<script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
实例
当用户点击按钮后，有 id="test" 属性的元素将被隐藏：
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a header< /h2>
<p>This is a paragraph</p>
<p id="test">This is another paragraph</p>
<button>Click me</button>
</body>
Here it can be seen that when p takes the id selector, when calling the user button prompt in jq, only the test in the id selector is hidden.
.class selector
The jQuery class selector can find elements by the specified class.
The syntax is as follows:
example
All elements with the class="test" attribute are hidden after the user clicks the button :
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
更多实例
独立文件中使用 jQuery 函数
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：
实例
通过 $(":button") 可以选取所有 type="button" 的 <input> 元素 和 <button> 元素，如果去掉冒号，$("button")只能获取 <button> 元素。
<p id="test1">点进这里测试 <b>button</b></p> <p id="test2">点进这里测试 <b>:button</b></p> <button>Button 按钮</button> <input type="button" value="Input 按钮">
关于 : 和 [] 这两个符号的理解
：可以理解为种类的意思，如：p:first，p 的种类为第一个。
[] 很自然的可以理解为属性的意思，如：[href] 选取带有 href 属性的元素。