前端开发 - 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=& ...
随机推荐
- js基本知识5
1.1 复习 1. 按钮不可用 disabled = “disabled” || true 2. setTimeout 只执行一次 setInterval 执行很多次 3. 递归调用 : 函数自己调用 ...
- python 将base64字符串还原成图片保存
import os,base64 strs='''/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCI ...
- Makefile 12——改善编译效率
从Makefile的角度看,一个可以改善编译效率的地方与其中的隐式规则有关.为了了解make的隐式规则,我们把之前的simple项目的Makefile做一点更改,删除生成.o文件的规则(与隐式规则相对 ...
- json中把非json格式的字符串转换成json对象再转换成json字符串
JSON.toJson(str).toString()假如key和value都是整数的时候,先转换成jsonObject对象,再转换成json字符串
- [C++]在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include StdAfx.h”
问题现象:在写好的.cpp文件后,编译报错.提示"你建立的工程使用了预编译功能, cpp最前边要留一行这样的内容:#include "StdAfx.h"问题原因:网上说是 ...
- Linux系统编程--read/write
. read/write read函数从打开的设备或文件中读取数据. #include <unistd.h> ssize_t read(int fd, void *buf, size_t ...
- Entity Framework中的实体类添加复合主键
使用Code First模式实现给实体类添加复合主键,代码如下: using System; using System.Collections.Generic; using System.Compon ...
- CRC16
http://www.stmcu.org/chudonganjin/blog/12-08/230184_515e6.html 1.循环校验码(CRC码): 是数据通信领域中最常用的一种差错校验码,其特 ...
- MRF能量优化
一个外国博客,写的比较清晰 http://nghiaho.com/?page_id=1366 MRF优化牛人 重庆大学的教授 1 http://qianjiye.de/2015/09/reparame ...
- HDU1717--小数化分数2
这道题是将输入的小数(有可能是无限循环小数)来化为分数.刚開始看到以为枚举(千万不要嘲笑我),可是感觉不正确. 所以百度了小数化为分数的方法,然后看到了各种方法,原来是这这样,在这我採用的是小数化为分 ...