1.JQuery设计思想
*选择网页元素
**模拟CSS选择元素
**独有表达式选择
**多种筛选方法
*JQuery写法
**方法函数化
**链式操作
**取值赋值合体
2.取值赋值
*当一组元素时,取值的是一组中的第一个
*当一组元素时,赋值的是一组中的全部元素
eg:
$('#div').html('hello');——赋值
$('#div').html();——取值
3.$()下的常用方法
has()-包含
eg:$('div').has('span').css('background','red');//
not()-不过滤,filter的反义功能
filter()-对一组元素进行选择(过滤)
eg:
$('div').filter('.box').css('background','red');//选择类名为box的div
$('div').not('.box').css('background','red');//不选类名为box的div
区别:
*filter和not是针对当前元素,has是针对当前元素包含的内容。
next()-选择下一个兄弟节点
eg:$('div').next().css('backgorund','red');
prev()-选择上一个兄弟节点
eg:$('div').prev().css('backgorund','red');
find()-查找
eg:$('div').find('h2').css('backgorund','red');
eq()-一组元素中的下标(和数组中下标用法相同)
eg:$('div').find('h2').eq(1).css('backgorund','red');
index()-索引节点
attr()-设置属性、类名等
eg:$('div').attr('calss','box');
实例:编写选项卡
原生JS和JQuery都可以使用,但JQuery大大简化了代码。
HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>使用JQuery实现垂直菜单</title>
<meta charset=utf-8>
<meta name=description content="Menu.html">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/Menu.css">
<script src="js/jquery-1.3.2.min.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#">*菜单一*</a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
</ul>
</li>
<li class="main">
<a href="#">*菜单二*</a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
</ul>
</li>
<li class="main">
<a href="#">*菜单三*</a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
</ul>
</li>
</ul>
<script src="js/Menu.js"></script>
<br>
<br>
<br>
<br>
<ul>
<li class="main1">
<a href="#">*菜单一*</a>
<ul>