前端开发 - JQuery - 上
一、js的缺点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用js的一些痛处</title>
<style type="text/css">
div{ width: 100%; height: 100px;margin: 10px 0 0 0 ;display: none; background-color: red;} </style>
</head>
<body>
<button id="btn">展示</button>
<div></div>
<div></div>
<div></div> </body>
<!-- http://libs.baidu.com/jquery/2.0.0/jquery.min.js -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){
$('#btn').click(function () {
$('div').css('display','block');
$('div').html('div展示了'); })
}); // window.onload = function () {
// var oBtn = document.getElementsByTagName('button')[0];
// var oDivs = document.getElementsByTagName('div');
//
// oBtn.onclick = function () {
// for(var i=0;i<oDivs.length;i++){
// oDivs[i].style.display = 'block';
// oDivs[i].innerHTML = 'div展示了';
// }
// }
// } /* 总结：
* 痛处：1.书写繁琐，代码量大
* 2.动画 开启定时器 小心定时器的清除
* 3.各种操作和处理事件 不好实现 浏览器的兼容；
*
* jquery 的出现就解决了上面出现的问题
*
* jquery的官网 http://jquery.com/
*
* jquery-3.2.1.js 用在开发环境
* jquery-3.2.1.min.js 用在生产环境
* */
</script>
</html>
二、jquery文件的引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery文件的引入</title> <!--<script type="text/javascript">-->
<!--// 如果不写 window.onload 代码的执行顺序是 从上到下-->
<!--var oDiv = document.getElementById('box');-->
<!--console.log(oDiv); //null -->
<!--</script>--> </head>
<body> <script type="text/javascript">
// window.onload = function () {
// var oDiv = document.getElementById('box');
// console.log(oDiv); //有
// };
// window.onload = function () {
// alert('1111111111111')
// } </script> <div id="box"></div> </body>
<script src="./jquery-3.2.1.js"></script>
<script type="text/javascript">
//如果没有引入jquery ; $ is not defined
// console.log($); //jquery 是js的一个库文件，既然是库文件，就会抛出来 一个构造函数或者对象 // 书写jquery的方式 入口函数
$(document).ready(function () {
alert(111);
});
$(document).ready(function () {
alert(222);
});
// 等价
$(function () {
alert(333);
}) /*总结：
* DOM文档加载的步骤
解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM树构建完成。
$(document).ready()
加载图片等外部文件。
页面加载完毕。
window.onload() 执行时间不同。
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
如果不写 window.onload 代码的执行顺序是 从上到下
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行 简化写法不同
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){}); * */ </script>
</html>
三、jquery基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery基础选择器</title>
<style type="text/css">
/*#brother{color: red;}*/
</style>
</head>
<body>
<ul>
<li id="brother">路飞学城1</li>
<li><a href="https://www.luffycity.com">路飞学城2</a></li>
<li class="li3">路飞学城3</li>
<li>路飞学城4</li>
<li>路飞学城5</li>
</ul> </body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数
$(document).ready(function () { //基础选择器
//1.id选择器
console.log($('#brother'));
$('#brother').css('color','red'); //2.标签选择器
// $('a').css('color','yellow'); // 设置一个值
$('a').css({'color':'green','font-size':'24px'}); // 设置多个值 使用对象 key:value
console.log($('li')); //3.类选择器
$('.li3').css('background','yellow'); //4.通配符选择器 使用不频繁
console.log($('*')); // $('*').html(''); // 清空整个界面的dom元素
$('a').val();
console.log($('a').val()); //清空a的val值 }) </script> </html>
四、jquery层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery层级选择器</title>
<style type="text/css">
/*#brother{color: red;}*/
</style>
</head>
<body>
<ul>
<li id="brother">路飞学城1</li>
<li><a href="https://www.luffycity.com">路飞学城2</a></li>
<li class="li3">路飞学城3</li>
<li>路飞学城4</li>
<li>路飞学城5</li>
</ul>
<div id="box">
<p id="father">天王盖地虎</p>
<p>我是你老母</p>
<p>宝塔镇河妖</p>
<p>蘑菇放香蕉</p>
<div id="box2">
<p>小鸡炖磨菇</p>
</div>
</div> </body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数
$(document).ready(function () { //层级选择器
//1.后代选择器 div p
$('#box p').css('color','red'); //2.子代选择器 div>p
$('#box>p').css('color','green'); //3.毗邻选择器 匹配所有的紧接着选中元素的兄弟
$('#father+p').css('font-size','30px'); //4.兄弟选择器
$('#father~p').css('background','gray'); console.log($('li'));
//5.获取第一个元素
$('li:first').css('font-size','50px'); //6.获取最后一个元素
$('li:last').css('font-size','80px'); //7.取其他的元素
$('li:eq(2)').css('background','red'); }) </script> </html>
五、jquery基本过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery基本过滤选择器</title>
</head>
<body>
<ul>
<li>哈哈哈，基本过滤选择器</li>
<li>嘿嘿嘿</li>
<li>天王盖地虎</li>
<li>小鸡炖蘑菇</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> $(function () { //获取第一个 :first 获取最后一个 :last
$('li:first').css('background','gray');
$('li:last').css('background','yellow'); // 获取奇数
$('li:odd').css('color','red');
// 获取偶数
$('li:even').css('color','green'); // 选中索引值为1的元素 用的比较多
$('li:eq(1)').css('font-size','32px');
// > 1 大于索引值1
$('li:gt(1)').css('font-size','60px');
// < 1 小于索引值1
$('li:lt(1)').css('font-size','10px');
}) </script>
</html>
六、jquery属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery属性选择器</title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<p class="p1">我是一个段落</p>
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li> </ul> <form action="" method="post"> <input name="username" type='text' value="1" checked="checked"></input>
<input name="username1111" type='text' value="1"></input>
<input name="username2222" type='text' value="1"></input>
<input name="username3333" type='text' value="1"></input>
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button> </form>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> $(function () { //标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red'); //匹配给定的属性 是what值得 //[attr=value] 匹配给定的属性是某个特定值的元素
$('li[class=what]').css('font-size','30px'); //没有class 也会发生变化 //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('font-size','50px'); //匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','gray'); //匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','green'); //匹配给定的属性是以包含某些值的元素
$('button[class*=danger]').css('background','orange'); }) </script>
</html>
七、jquery筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery筛选选择器</title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul> </body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () { //获取第n 个元素 数值从0 开始
// $('span:eq(0)')
$('span').eq(1).css('color','red'); //获取一个元素 .first .last . 语法 包含get set
$('span').last().css('color','greenyellow'); // set
console.log($('span').last()); // get
console.log($('span')); // 对象 对象才有方法 //.parent() 选择父亲元素
console.log($('span').parent());
$('span').parent('.p1').css({'width':'300px',height:'400px','background':'red'}); //.siblings()选择所有的兄弟元素
$('.list').siblings('li').css('color','red'); //.find()
//查找所有的后代元素
$('div').find('button').css('background','gray'); }) </script>
</html>
八、jquery对象和Dom对象的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery对象和Dom对象得转换</title>
<style type="text/css">
#box{ width: 200px; height: 200px;background-color: red;}
</style>
</head>
<body>
<div id="box">
天王盖地虎
</div>
<button>隐藏</button>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> // Dom --》 jquery
var oDiv = document.getElementById('box');
console.log(oDiv);
console.log($(oDiv)); $(oDiv).click(function () { // 回调函数
alert(111)
}); // jquery --》 dom
console.log($('button'));
console.log($('button')[0]);
console.log($('button').get(0)); var isShow = true;
$('button')[0].onclick = function () {
// alert(222)
if(isShow){
$(oDiv).hide();
// this.innerText = '显示'
// console.log($(this))
$(this).text('显示');
isShow = false;
} else{
$(oDiv).show();
$(this).text('隐藏');
isShow = true;
}
} </script>
<!--
总结：
DOM对象转换成jquery对象
var box = document.getElementById('box');
console.log($(box)); .click jquery对象转化成DOM对象
第一种方式：
$('button')[0] .onclick 第二种方式：
$('button').get(0) .onclick -->
</html>
九、jquery效果 show hide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery效果显示隐藏</title>
<style type="text/css">
#box{width: 100px;height: 100px;border: 1px solid red;display: none;}
</style> </head>
<body>
<div id="box"> </div>
<button id="btn">隐藏</button>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> //.css 控制属性
$('#btn').click(function () {
$('#box').css('display','block');
}); //2.jquery 提供了一些方法 show() hide()
var isShow = true;
$('#btn').click(function () {
if(isShow){
$('#box').show('slow',function () {
// alert(1)
$(this).text('盒子出来了');
isShow = false;
$('#btn').text('显示');
})
}else{
$('#box').hide(2000,function () {
$(this).text('');
isShow = true;
$('#btn').text('隐藏'); })
}
}) //3.toggle 开关 如果元素显示则隐藏 反之亦然
$('#btn').click(function () {
$('#box').toggle(3000,function () {
alert(111)
});
}) </script>
</html>
十、jquery效果 slide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slide</title>
<style type="text/css">
#box{width: 100px;height: 100px;border: 1px solid red;display: none;}
</style>
</head>
<body>
<div id="box"> </div>
<button id="btn">隐藏</button>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () { $('#btn').hover(function () {
$('#box').slideDown(2000);
},function () {
$('#box').slideUp(3000);
}) $('#btn').click(function () {
$('#box').slideToggle('slow');
}) }) </script>
</html>
十一、jquery效果 fade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fade</title>
<style type="text/css">
#box{width: 100px;height: 100px;border: 1px solid red;background-color: yellow;}
</style>
</head>
<body>
<div id="box"> </div>
<button id="btn">隐藏</button>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('#box').fadeOut(2000);
}); $('#box').mouseover(function () {
$('#box').fadeOut(2000);
});
$('#btn').mouseout(function () {
// $('#box').fadeIn(3000);
$('#box').fadeTo(2000,0.3)
}); $('#btn').click(function () {
$('#box').fadeToggle(3000);
}) }) </script>
</html>
十二、jquery效果 animate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画效果 animate</title>
<style type="text/css">
#box{width: 100px;height: 100px;border: 1px solid red;background-color:
yellow;position: absolute;} </style>
</head>
<body>
<button id="btn">动画吧</button>
<button id="stop">停止吧</button>
<div id="box">
hello luffy
</div> </body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () { //同时执行
$('#box').animate({
width:'200px',
height:'300px'
}) $('#box').animate({left:'100px',top:'200px'}); /* 执行完一个在执行一个 */ // jquery 链式调用
$('#box').animate({left:'100px',top:'200px'}).delay(2000).animate({top:'400px'}); $('#box').animate({left:'100px',top:'200px'},5000); }); $('#stop').click(function () {
$('#box').stop();
}) }) </script>
</html>
十三、右下角弹出小广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出小广告</title>
</head>
<body>
<div id="box" style="width: 330px;height: 480px; position: absolute;right: 10px;bottom: 0;display: none;">
<img src="广告.png" alt="" style="width: 100%;height: 100%;">
</div> </body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//jquery 链式调用
$('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {
$(this).fadeOut(1000);
}); }) </script>
</html>
前端开发 - JQuery - 上的更多相关文章
- 前端开发 - JQuery&Bootstrap - 总结
一.JavaScript和Jquery的区别 1.javascript的缺点: 1.书写繁琐,代码量大 2.代码复杂 3.动画效果,很难实现.使用定时器 各种操作和处理 2.定义: 1.Javascr ...
- 【前端】:jQuery上
前言: 今天写一篇jQuery,发现内容太多了,那就分成两篇写吧--写完jQuery基础知识后会再写一些jQuery实例~~ jQuery下载.jQuery是一个兼容多浏览器的javascript库, ...
- 前端开发 - jQuery
本节内容 一.jQuery概述 二.选择器 三.操作DOM 四.修改DOM结构 五.事件 六.动画 七.AJAX(待续) 八.扩展(待续) 一.jQuery概述 jQuery 是一个 JavaScri ...
- 前端开发 - JQuery - 中
十四.jquery属性操作 attr prop <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 前端开发—jQuery
jquery简介 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...
- 1+x证书web前端开发jquery专项练习测试题
javascript程序设计-题库 1.下面哪一种不属于Jquery的选择器? A. 基本选择器 B. 层次选择器 C. 表单选择器 D. 节点选择器 答案: D 2.如果需要匹配包含文本的元素,用下 ...
- Web前端开发JQuery框架
JQuery 是一个兼容多浏览器支持的JavaScript库,其核心理念是write less,do more(写得更少,做得更多),它是轻量级的js库,兼容CSS3还兼容各种浏览器,需要注意的是后续 ...
- 第十一章 前端开发-jQuery
11.4.0 jQuery 11.4.1 基本知识 定义: jQuery是一个快速,小巧,功能丰富的JavaScript库 作用:它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作, ...
- 前端开发 - JQuery - 下
二十五.jquery的事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
随机推荐
- Linux之目录的操作(创建、移动、改名、删除、复制)
.创建 mkdir [dirname] //创建单个目录 mkdir -p newdir1/newdir2/newdir3 //递归创建多级目录 mkdir dir1/dir2/newdir3 //在 ...
- 跟着百度学PHP[13]-文件处理 文件后缀验证、设置随机文件名....
目录: 文件的处理:00x1 判断错误 文件的处理:00x2 判断类型 文件的处理:00x3 文件大小 ++++++++++++++++++++++++++++++++++++++++++++++++ ...
- 16c554 的头文件
//------------------------------------------------------------------------------ #ifndef AT16C554H # ...
- SpringBoot使用maven构建
1.使用maven作为parent管理 maven用户可以继承spring-boot-starter-parent项目获取合适的默认设置.该父项目提供一下特性: 默认编译级别为Java1.6 源编码格 ...
- Desugar Scala(15) -- unapply和unapplySeq方法
欢迎关注我的新博客地址:http://cuipengfei.me/ 实在想不到什么动词可以当做脱衣服来讲了,所以从现在开始这系列博文就叫做Desugar Scala了.除非哪天才思泉涌,又想到了新词: ...
- 实践jQuery Easyui后本地化有感
这个星期在忙着easyui的例子中的大部分功能的本地化.一开始给我的感觉就是把jquery easyui中的每个demo的代码粘贴复制一遍. 可是,真正在做的过程中,我才发现,我错了. 在仿写easy ...
- 关于Unity的C#基础学习（五）
一.get/set访问器 class Person{ int my_age; //默认私有权限 int sex; //属性,类似于函数,但是又不是函数的东西 public int age{ get{ ...
- 梯度下降算法到logistic回归
http://sbp810050504.blog.51cto.com/2799422/1608064/ http://blog.csdn.net/dongtingzhizi/article/detai ...
- c#并行扫描端口控制台程序
static void Main(string[] args) { Console.WriteLine("请输入ip"); string ip = Console.ReadLine ...
- html转pdf工具：wkhtmltopdf.exe
百度云下载:http://pan.baidu.com/s/1dEX0h93