jQuery的基础知识及简单微博发布功能的实现
jQ的定义
jQuery是一个兼容多浏览器的JavaScript框架。可以使用户方便的处理HTML、事件,实现动画效果,并且为网站提供方便的Ajax交互。
jQuery特点
轻量级
出色的浏览器兼容器
强大的选择器
出色的DOM操作封装
完善的ajax
链式编程
隐式迭代
完善的文档、强大的社区
丰富的插件
jQuery基本的规则和概念
1)jQuery会提供一个对象叫 $ ,这个就代表jQuery
2)jQuery使用$去获取我们需要的元素 $(‘选择器’) 把得到的元素称为jq对象
3)jq提供的所有方法只能有jq对象调用 jq对象.jq方法();
主要学习的有两样东西
1、各种各样的选择器
2、jq提供的各种各样的方法
和DOM代码的比较
与DOM的代码相比。你会发现,代码量大幅度的减少的,比DOM代码更简洁,在jq中主要是API的调用。而不是你自己去写,所以这就要你知道怎样去查找API,在写jq代码时,可以自己先去百度一个jq参考手册,方便你在实现某一个功能时,知道调用哪个API合适;在DOM代码没有这么多的API可以去多用,需要自己去写。
个人感觉,当你了解足够jq的API,你就会发现jq的代码特别容易理解,大致的思路是,先明白你要什么样的效果,再去查看什么API能帮你达到这样的效果,以及这个API该如何去用;然后编写jq代码,要么先不管其他元素,就一心去实现你想要的效果,等你想要的效果出来了,然后再去消除对其他元素的效果;要么就先消除你要实现的效果给其他元素带来的影响,再去实现你想要的效果;就还以灯泡效果为例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 下面这一行代码一定要引入,不然就无法调用jq中方法,这个版本有很多,可以在网上找一个自己用的舒服的版本用 -->
<script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
// 获取img元素,注册一个点击事件
$("img").click(function(){
// this代表点击源,siblings()代表兄弟元素,先消除对兄弟元素的影响,再实现效果。
$(this).siblings().css("border",0).end().css("border","4px solid red");
})
})
</script>
</head>
<body>
<img src="./images/19/1.jpg" alt="">
<img src="./images/19/2.jpg" alt="">
<img src="./images/19/3.jpg" alt="">
<img src="./images/19/4.jpg" alt="">
<img src="./images/19/5.jpg" alt="">
</body>
</html>
看了上面的案例是不是感觉很神奇,在DOM要将近十行的代码,在这里只要三行代码,下面是去实现一个简单的微博发布功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微博发布功能</title>
<style>
*{margin:0;padding:0}
#weibo{
width: 600px;
padding:10px;
border: 1px solid #000;
margin:100px auto 0;
}
#weibo textarea{
width: 455px;
height: 165px;
resize:none;
vertical-align: bottom;
}
#weibo button{
width: 40px;
height: 24px;
vertical-align: bottom;
}
#weibo ul{
margin:20px 20px 20px 90px;
}
#weibo li{
line-height: 24px;
list-style-type:none;
border-bottom:1px dashed #ccc;
word-break:break-all; /*自动换行*/
}
</style>
</head>
<body>
<div id="weibo">
微博内容:
<textarea></textarea>
<button>发布</button>
<ul>
<li>昨天,天气很热,差点热死了!</li>
</ul>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
$('button').click(function(){
// 1.拿到输入的内容
var res=$('textarea').val();
if(res!=''){
// console.log(res);
// 2.创建孤儿元素
var oLi=$('<li>'+res+'</li>');
//3.添加元素
$('ul').prepend(oLi);
//4.清空文本域
$('textarea').val('');
}else{
alert('请输入内容');
}
});
</script>
</body>
</html>
效果如下:
本文地址:https://blog.csdn.net/only_zing/article/details/107876396
上一篇: Mybatis-plus 带条件的查询select语句示例
下一篇: JBrowse搭建