前端-常用jquery基础篇
标签：on() 开发 name code jquery基础 color 属性 rgba write
一。jquery简介
jquery是基于javascript类库的框架， 它里面提供了许多javascript类库，和一些css样式表的封装， 使用起来比较方便， 简化了用户与浏览器的交互， 提高了系统的性能和开发效率。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
二。jquery 中标签获取
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box1">box1 <span>00000</span> </div> <div id="box2">box2</div> <a href="http://www.baidu.com">百度</a> <div>box3 <ul> <li>1000000</li> <li>2000000</li> <li>3000000</li> <li name="python">111</li> <li name="java">222</li> <li name="c++">333</li> <li name="log">444</li> <li name="js">555</li> <div> <a href="http://www.baidu.com">百度</a> </div> </ul> </div> </body> </html>
使用js文档操作jquery：
js文档内容：
//
{
//
// var box1 = ;
//
//console.log();
//
// var lis = ;
// console.log(lis.text())
//
// var lis = $(".box3 li[name=python]");
//
// console.log()
//
// console.log()
//
// console.log();
//
// console.log();
//
// console.log();
//
// console.log();
//
// console.log();
//从选择的标签中再选择；与find联用 查找box3下div标签下的a标签的内容
// console.log($(".box3").find($("a")).text());
//选择，过滤选择；查找包含a标签的div
// var aaa = $("div").has("a");
// console.log(aaa)
//选择过滤；通过div标签查找类属性不为box的标签
// console.log($("div").not(".box"))
//选择过滤；通过div标签查找类属性为box的标签
// console.log($("div").filter(".box"))
//选择第4个div元素
// console.log($("div").eq(3).text());
});
三。jqery操控CSS
直接再html写js代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery操控css</title>
<style type="text/css">
.box3{
height: 500px;
width: 300px;
background: aqua;
}
.box4{
height: 500px;
width: 300px;
background: rebeccapurple;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>box1</div>
<br>
<div>box2</div>
<br>
<div class="box3 hide">box3</div>
<br>
<div>box4</div>
<input id="btn" type="button" value="点击">
//
//
//
$("#btn").click(function () {
//addClass新增一个类属性方法
// ;
//,
// ;
//
//
//用于隐藏的函数
//
// $(".box4").
//
// $(".box4").
//
// $(".box4").
//快
// $(".box4").
//
// $(".box4").
//
// $(".box4").
})
</script>
</body>
</html>
四。jqery,层级操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--侧边菜单-->
<div>
<div>
菜单列表
</div>
<div>
<ul>
<li>
<h3>接口管理</h3>
<ul>
<li><a href="">添加接口</a></li>
<li><a href="">接口列表</a></li>
</ul>
</li>
<li>
<h3>接口管理</h3>
<ul>
<li><a href="">添加接口</a></li>
<li><a href="">接口列表</a></li>
</ul>
</li>
<li>
<h3>接口管理</h3>
<ul>
<li><a href="">添加接口</a></li>
<li><a href="">接口列表</a></li>
</ul>
</li>
<li>
<h6>接口管理</h6>
<ul>
<li><a href="">添加接口</a></li>
<li><a href="">接口列表</a></li>
</ul>
</li>
<li>
<h7>接口管理</h7>
<ul>
<li><a href="">添加接口</a></li>
<li><a href="">接口列表</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--写在html中-->
<script type="text/javascript">
h3s= $(".left_menu_list h3");
console.log(h3s)
//当点击外层菜单标签时，
h3s.click(function () {
//
;
//点中后设置颜色,没实现
$(this).css({
background:"6BB9FF"
})
})
</script>
</body>
</html>五。jqery,输入框,提交、新增、删除操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--案例一-->
<form action="" method="post">
账号：<input type="text" name="user" id="user">
<br>
密码：<input type="password" name="pwd" id="pwd">
<input type="button" id="btn">
</form>
<!--案例二,添加新的HTML内容-->
<!--<form action="" method="post">-->
<!-- <input type="button" id="btn" value="添加输入框">-->
<!-- <input type="button" id="del" value="删除输入框">-->
<!-- <br>-->
<!-- <div>-->
<!-- <div>-->
<!-- 参数：<input type="text" name="user" id="user">-->
<!-- 值：<input type="text" name="pwd" id="pwd">-->
<!-- </div>-->
<!-- </div>-->
<!--</form>-->
<script>
//
{
console.log(user,pwd)
})
//
// {
// = "<div>\n" +
// " 参数：<input type=\"text\" name=\"user\" id=\"user\">\n" +
// " 值：<input type=\"text\" name=\"pwd\" id=\"pwd\">\n" +
// " </div>";
//
//
// })
//
// //删除，若输入框为1的时候不删除
// {
// var box1 = $(".box1").children()
// v
// // console.log(box1len)
// i{
//
// }else {
//
// }
// })
</script>
</body>
</html>
标签：on() 开发 name code jquery基础 color 属性 rgba write
原文地址：https://www.cnblogs.com/newsss/p/14504862.html