目录
JQuery
官方解释:是JavaScript的代码库,也是它的框架
JQuery=$ 是在 $(document).ready(function(){}下开始应用JQuery封装好的方法,来执行命令。
先通过两个简单的例子来认识一下JQuery;
栗子壹
要求:点击按钮,实现alert弹窗:
【JQuery】
HTML: <input type="button" value="点击"/>
JQuery:
$(document).ready(function () {
$("#ok").click(function (){
alert("hello");
});
});
【JavaScript】
HTML:<input type="button" value="点击" οnclick="myFunction()"/>
javaScript:
function myFunction()
{
alert("你好,我是一个警告框!");
}
Jquery,使用了已经封装好的click时间,不需要在html中声明οnclick=""事件,这样已经减少了动态操作jquery和html之间的粘性,但怎么体现JQuery比JavaScript更加的快速?
栗子贰
【JQuery】——点击下拉;滑动下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*//小圆点 list-style
//缩紧清除 padding margin
//背景控制: class="main" 背景图片提醒立体效果backgroun-image norepeat;或者,background-repeat = repeat-x
//li设定背景色*/
ul,li {
list-style:none;
padding:0px;
margin:0px;
}
.main, .hmain {
background: url('button1.jpg') no-repeat;
width: 100px;
}
li {
background-color:#f7ebf5;
width:100px;
}
a {
text-decoration:none ;
padding-left:20px;
/*充满所占的区域*/
display:block;
display:inline-block;
padding-top:2px;
padding-bottom:2px;
}
.main a,.hmain a{
color: black;
background: url('icon2.gif') no-repeat;
background-position: 5px center;
}
.main li a,.hmain li a{
color: gray;
background-image: none;
}
.main ul,.hmain ul{
/*子菜单项全部隐藏*/
display: none;
}
.hmain {
float:left;
}
</style>
<script type="text/javascript" src ="jquery.js"></script>
<script type="text/javascript">
//竖向的菜单动态下拉设置
$(document).ready(function(){
//页面中的DOM已经装载完成了,执行的代码
$(".main > a").click(function(){
var node = $(this).next("ul");
//方法一:
//if(node.css("display") == "none") {
// node.css("display", "block");
//} else {
// node.css("display", "none");
//}
//方法二三:
//node.show();
//node.hide();
//node.toggle();
//方法四:
node.slideToggle();
changeIcon($(this));
});
//横向菜单鼠标移动动态显示
$(".hmain").hover(function () {
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
},function () {
$(this).children("ul").slideUp();
changeIcon($(this).children("a"));
});
});
//修改下拉框的图标---这是用JavaScript实现的
function changeIcon(mainNode) {
if (mainNode) {
if (mainNode.css("background-image").indexOf("icon2.gif") >=0){
mainNode.css("background-image", "url( 'icon1.gif' )");
} else {
mainNode.css("background-image","url( 'icon2.gif' )");
}
}
}
</script>
</head>
<body>略</body>
【JavaScript】——滑动下拉
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.js"></script>
<style type="text/css">
ul {
list-style: none;
}
li {
width: 200px;
height: 35px;
float: left;
background: yellow;
overflow: hidden;
line-height: 35px;
text-align: center;
}
</style>
<script>
window.onload = function () { //在浏览器设置窗口
var li = document.getElementsByTagName("li");//返回带有指定标签名的对象集合
for (var i = 0; i < li.length; i++) {
li[i].onmouseover = function () {
console.log(this);//这里的this指的是Windows
this.style.overflow = "visible";
}
//鼠标移动上去,内容不会被修剪,会呈现在元素框之外
li[i].onmouseout = function () {
this.style.overflow = "hidden";
//鼠标移除去,内容会被修剪,并且其他内容是不可见的
}
}
}
</script>
</head>
JQuery可以和CSS进行无缝连接,可以对CSS样式里的所有选择器进行获取操作:比如基本选择题: id #id;类 class;标签 tag; 通用*,还可以通过方法: .val() .text() .html() .css() .attr()进行获取操作,
JavaScript是通过DOM获得指定的标签名,转化成dom 进行for循环遍历,执行。
JQuery 和DOM之间的关系更加灵活:
1、相互转化:
2、DOM操作被封装好
- 区分:dom->jquery: $(dom对象 jquery对象不是万能)
- jquery->dom :1个对象的时候 jquery.[0];多个对象的时候可以使用.Get()
Next() prev()silblings() nestALL()… children()…
这些都是为了定位获得定位元素,为了获得定位元素的地方,都可以使用选择器
JQuery存在并受到欢迎,一定是有原因的!