Jquery入门（初学者易懂）
Jquery入门（初学者易懂）
一.定义
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多选择器和方法。
二.环境搭建（编译器：Hbuilder）
1.获取jQuery库，进入官网 http：//jquery.com/，单击 Download jQuery
2.引入jQuery库，在Wed项目的Webcontent目录中新建js目录，将其放入。
<html>
<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello world");
})
</script>
</head>
<body>
</body>
</html>
三.jquery通用属性的操作
1.对HTML代码的操作，语法：jquery对象.html([content]),
2.对文本内容的操作，语法:jquery对象.text([content]),
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").text("<h1 style = 'background:yellow'>hello</h1>");
var $text = $("span").text();
alert($text);
});
</script>
</head>
<body>
<div></div>
<span style = "background:yellow">world</span>
</body>
</html>
3.对value值得操作，语法: jquery对象.tval([v]),
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#searchId").focus(function(){
var txt_value = $(this).val();
if(txt_value == "搜索"){
$(this).val("");
}
});
$("#searchId").blur(function(){
var txt_value = $(this).val();
if(txt_value == ""){
$(this).val("搜索");
}
});
});
</script>
<title></title>
</head>
<body>
<input type="text" value="搜索" id="searchId" />
</body>
</html>
4.对属性的操作，主要通过attr()和removeAttr()方法来对节点进行操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//设置图片宽和高
$("img").attr({width:"80px",height:"80px"});
//获取图片的宽
alert("width:"+$("img").attr("width"));
//删除图片的宽
$("img").removeAttr("width");
alert("删除width之后："+$("img").attr("width"));
});
</script>
</head>
<body>
<img src = "img/firefox.png"/>
</body>
</html>
5.对节点元素的操作：
已经存在的节点如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<ul>
<li>香蕉</li>
<li>苹果</li>
</ul>
</body>
</html>
现在插入节点（内部插入）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
var $node = $("<li>橘子</li>"); //插入节点语句
$("ul").append($node);//或者$node.appendTo("ul");
});
</script>
</head>
<body>
<ul>
<li>香蕉</li>
<li>苹果</li>
</ul>
</body>
</html>
现在插入节点（外部插入）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
var $node = $("<li>橘子</li>"); //插入节点语句
$("ul").after($node);//或者$node.insectAfter("ul");
});
</script>
</head>
<body>
<ul>
<li>香蕉</li>
<li>苹果</li>
</ul>
</body>
</html>
替换节点（replacewith(）和replaceall()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
var $node = $("<li>橘子</li>"); //插入节点语句
$("ul li:first").replaceWith($node );
</script>
</head>
<body>
<ul>
<li>香蕉</li>
<li>苹果</li>
</ul>
</body>
</html>
删除节点（remove,detach,empty）
复制节点（$（A）.clone([flag])）其中flag为true or false