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代码,要么先不管其他元素,就一心去实现你想要的效果,等你想要的效果出来了,然后再去消除对其他元素的效果;要么就先消除你要实现的效果给其他元素带来的影响,再去实现你想要的效果;就还以灯泡效果为例:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
 
    <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要将近十行的代码,在这里只要三行代码,下面是去实现一个简单的微博发布功能:


<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=$('
  • '+res+'
  • '
    ); //3.添加元素 $('ul').prepend(oLi); //4.清空文本域 $('textarea').val(''); }else{ alert('请输入内容'); } });
    script> body> html>

    效果如下:
    jQuery的基础知识及简单微博发布功能的实现_第1张图片
    jQuery的基础知识及简单微博发布功能的实现_第2张图片

    你可能感兴趣的:(js,jquery,css,html)