您好,欢迎访问一九零五行业门户网

jQuery怎么使用?jQuery选择器有哪些?

本篇文章给大家带来的内容是介绍jquery怎么使用?jquery选择器有哪些?让大家了解jquery文件库的使用,基本语法的使用,jquery选择器。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
1. 使用方法
jquery 库位于一个 javascript 文件中,其中包含了所有的 jquery 函数。
网页需要使用到 jquery 时,需要先在网页中引入 jquery 的 js文件。
76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e6cee78a5815e1ea034fd9f5df4179a0cb2386ffb911b14667cb8f0f91ea547a7my test jquery6e916e0f7d1e588d4f442bf645aedb2f    9b264bb87e5a392a4202120e2b17019f2cacc6d41bbb37262a98f745aa00fbf09c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
2. jquery 语法
jquery 语法是通过选取 html 元素,并对选取的元素执行某些操作。【相关视频教程推荐:jquery教程】
基础语法形式:
$(selector).action()
例:
$("p").hide() // 隐藏所有 <p> 元素$("#myinfo").hide() // 隐藏所有 id="myinfo" 的元素
写法:
所有 jquery 函数位于一个 document.ready 的函数中。如下图。
这是为了防止文档在完全加载(就绪)之前运行 jquery 代码,即在 dom 加载完成后才可以对 dom 进行操作。
如果在文档没有完全加载之前就运行函数,操作可能失败。
$(document).ready(function(){ // 代码部分写在这里 });
也可以简写成下面这样:
$(function(){ // 这里写代码 });
举例:
<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>my test jquery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("button").click(function(){ $("#mydiv1").html("hello jquery world"); $("#mydiv1").css("background-color","green"); }); }); </script></head><body> <button type="button">点击</button> <div id="mydiv1">hello</div></body></html>
3. 基本选择器
(1) 元素选择器: jquery 元素选择器基于元素名选取元素。
举例:使用元素选择器选择所有<p>元素,将其隐藏。
<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>my test jquery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("button").click(function(){ $("p").hide(); }); }); </script></head><body> <button type="button">点击</button> <p>p元素1</p> <p>p元素2</p> <div id="mydiv1">hello</div></body></html>
(2) #id 选择器:jquery #id 选择器通过 html 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器
举例:使用 #id 选择器选择 id="mydiv1"的元素,将其隐藏。
<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>my test jquery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("button").click(function(){ $("#mydiv1").hide(); }); }); </script></head><body> <button type="button">点击</button> <p>p元素1</p> <p>p元素2</p> <div id="mydiv1">hello</div></body></html>
(3) .class 选择器:jquery 类选择器可以通过指定的 class 查找元素。
举例:使用类选择器选择class=“myclass1”的元素,将其隐藏。
<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>my test jquery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("button").click(function(){ $(".myclass1").hide(); }); }); </script></head><body> <button type="button">点击</button> <p>p元素1</p> <p>p元素2</p> <div id="mydiv1">hello</div> <div class="myclass1">你好</div></body></html>
总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。
以上就是jquery怎么使用?jquery选择器有哪些?的详细内容。
其它类似信息

推荐信息