jQuery基础语法
1.jQuery选择器
jQuery选择器可用改变HTML元素的CSS属性。如下代码选择页面中所有的p标签并改变其背景颜色为红色。
$(“p”).css(“background-color”,“red”);
jQuery根据CSS中相应的选择器,来操作HTML页面中的节点,列如上面的列子中,$(“p”)该代码是使用元素选择器来选择页面
中所有p标签。我们还可以使用id,类或组合选择器,甚至还可以添加:first,last,even,odd这样的后缀来匹配第一个,最后一个,偶数,奇数元素来操作HTML节点。
2.jQuery基础语法:
jQuery的选择机制构建于CSS的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。
jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。
基础语法:
(
s
e
l
e
c
t
o
r
)
.
a
c
t
i
o
n
(
)
.
美
元
符
号
“
(selector).action() .美元符号“
(selector).action().美元符号“”定义jQuery
.选择器(selector)“查询”和“查找”HTML元素。
.jQuery的action()执行对元素的操作。
3.无序列表:
概念:无序列表是一个没有特定顺序的列表项的集合,也称为项目列表。在无序列表中,各个列表之间属于并列关系,没有先后顺序之分,它们之间以一个项目符号来标记。使用无序列表标签ul的type属性(使用CSS的list-style来代替),用户可以指定出现在列表项前的项目符号的样式,主要有:disc(实心圆点)、circle(空心圆点)、square(实心方块)、none(无项目符号)。
基础语法:
<ul>
<li>列表项1</li>
<li>列表项2</li>
- …
<li>列表项n</li>
</ul>
1.在HTML文件中,可以利用成对的
- (list-items)用来定义列表项序列。
2.使用无序列表标签ul的type属性(使用CSS的list-style来代替)。用户可以指定出现在列表项前的项目符号的样式,其取值以及相应的符号样式如下:(1)disc:指定项目符号为一个实心圆点(默认值是disc,是否使用该值在浏览器中效果都一样);
(2)circle:指定项目符号为一个空心圆点;
(3)square:指定项目符号为一个实心方块;
(4)none:无项目符号。jQuery操作代码演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> var p1=document.getElementById() p1.style.backgroundColor='red' p1.style.width='50px' p1.style.height='50px' </script> </head> <body> <p>asd</p> <p>asd</p> <p>asd</p> <p>asd</p> </body> </html>
用无序列表实现二级导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{margin:0; padding:0;} #nav{background-color: #e9efa3; width:600px; height:20px; margin:0 auto; } ul li{ text-decoration: none;float:left;line-height: 20px;text-align: center;margin:0 auto;position:relative; } a{text-decoration: none;color:#33bba5;padding:0 10px;width:100px;} a:hover{ background-color: antiquewhite;color: #55f0ff; } ul li ul{position:absolute;top:20px;left:0px;} ul li ul li{float:none;background-color: #c5ffb8;margin:1px 0;display:none;} ul li ul li a{padding:0px;} ul li:hover ul li{display:block;} </style> </head> <body> <div id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程大厅</a> <ul> <li><a href="#">web实战</a></li> <li><a href="#">服务端技术</a></li> <li><a href="#">python开发</a></li> </ul> </li> <li><a href="#">学习中心</a></li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html>