一.定义

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多选择器和方法。

二.环境搭建（编译器：Hbuilder）

1.获取jQuery库，进入官网 http：//jquery.com/，单击 Download jQuery

2.引入jQuery库，在Wed项目的Webcontent目录中新建js目录，将其放入。

<html>
   <head>
    <script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	alert("hello world");
    })
    </script>
   </head>
   <body>

   </body>
  </html>

　　

三.jquery通用属性的操作

1.对HTML代码的操作，语法：jquery对象.html([content]),

2.对文本内容的操作，语法:jquery对象.text([content]),

<!DOCTYPE html>
<html>
	<head>
		   <meta charset="UTF-8">
		   <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
           <script type="text/javascript">
            $(document).ready(function(){
            	$("div").text("<h1 style = 'background:yellow'>hello</h1>");
            	var $text = $("span").text();
            	alert($text);
            });
            </script>
	</head>
	<body>
	<div></div>
	<span style = "background:yellow">world</span>
	</body>
</html>

　　3.对value值得操作，语法: jquery对象.tval([v]),

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
           <script type="text/javascript">
           $(document).ready(function(){
           	$("#searchId").focus(function(){
           		var txt_value = $(this).val();
           		if(txt_value == "搜索"){
           		$(this).val("");
           	}
           });
           $("#searchId").blur(function(){
           	var txt_value = $(this).val();
           	if(txt_value == ""){
           		$(this).val("搜索");
           	}
           });
           });
           </script>
		<title></title>
	</head>
	<body>
		<input type="text" value="搜索" id="searchId" />
	</body>
</html>

　　4.对属性的操作，主要通过attr()和removeAttr()方法来对节点进行操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
           <script type="text/javascript">

           $(document).ready(function(){
           	//设置图片宽和高
           	$("img").attr({width:"80px",height:"80px"});
           	//获取图片的宽
           	alert("width:"+$("img").attr("width"));
           	//删除图片的宽
           	$("img").removeAttr("width");
           	alert("删除width之后："+$("img").attr("width"));
           });
           </script>
	</head>
	<body>
		<img src = "img/firefox.png"/>
	</body>
</html>

　　5.对节点元素的操作：

已经存在的节点如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
           <script type="text/javascript">

           </script>
	</head>
	<body>
		<ul>
           <li>香蕉</li>
           <li>苹果</li>
           </ul>
	</body>
</html>

　　现在插入节点（内部插入）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

         <script>
         $(document).ready(function(){
          var $node = $("<li>橘子</li>");	//插入节点语句 

          $("ul").append($node);//或者$node.appendTo("ul");
         });
          </script> 

	</head>
	<body>
		<ul>
           <li>香蕉</li>
           <li>苹果</li>
           </ul> 

	</body>
</html>

　　现在插入节点（外部插入）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

         <script>
         $(document).ready(function(){
          var $node = $("<li>橘子</li>");	//插入节点语句 

          $("ul").after($node);//或者$node.insectAfter("ul");
         });
          </script> 

	</head>
	<body>
		<ul>
           <li>香蕉</li>
           <li>苹果</li>
           </ul> 

	</body>
</html>

　　替换节点（replacewith(）和replaceall()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

         <script>
         $(document).ready(function(){
          var $node = $("<li>橘子</li>");	//插入节点语句 

          $("ul li:first").replaceWith($node );
          </script> 

	</head>
	<body>
		<ul>
           <li>香蕉</li>
           <li>苹果</li>
           </ul> 

	</body>
</html>

　　删除节点（remove,detach,empty）

复制节点（$（A）.clone([flag])）其中flag为true or false

Jquery入门（初学者易懂）的更多相关文章

  1. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  2. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. jQuery入门（3）事件与事件对象

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  4. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  5. JQuery入门

    JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...

  6. jQuery入门必须掌握的一些API

    jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...

  7. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  8. 学习javascript怎么入门,初学者5条建议

    你是否已经初步掌握了html和css,但完全不知道从何入手Java?如果是,这里总结了5条建议,帮助JavaScript初学者总结学习方法,提高学习效率. 一.多看视频少看书 对初学者而言,看书的效率 ...

  9. jquery(入门篇)无缝滚动

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. 第一百六十二节，jQuery入门介绍

    jQuery入门 学习要点: 1.什么是  jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本  I ...

随机推荐

  1. scrapy的学习总结（1）

    1.xpath和css的节点的共同结合使用是一个挺好的使用过程,还有就是配合正则表达式的使用,这个也是很重要的.解决任何一个问题都会有不同方法.学会思考的解决问题. 2.item的数据抽取,pipel ...

  2. mysql无法启动的结果问题解决

    mac 上homebrew 安装的mysql,已经用了很长时间都没什么问题,今天 ERROR! The server quit without updating PID file (/usr/loca ...

  3. cronatab周期性任务

    要执行周期性任务,要保证服务运行.服务名为crond:service crond start ; systemctl start crond; 配置文件 /etc/crontab cron的日志文件 ...

  4. MSQL的基准测试

    Mysql基准测试 基准测试 直接.简单.易于比较,用于评估服务器的处理能力 压力测试 对真实的月数据进行测试,获得真是系统所能承受的压力 基准测试的目的 1.建立MySQL服务器的性能基准线 2.模 ...

  5. 【前端】Vue和Vux开发WebApp日志三、完善gulp任务

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_3.html 项目github地址:https://github.com/shamoyuu/vue- ...

  6. 项目使用EntityFramework需要做的几项工作

    1..新项目引用创建好的其他项目,比如实体类库.数据库业务.实体数据模型等需要用到的项目进行引用. 2.新项目使用NuGet获取AutoMapper和EntityFramework程序包进行安装引用, ...

  7. angularjs1.6.4中使用ng-table出现data.slice is not a function的问题

    这个问题困扰了我2个小时. 项目中angularjs的版本从1.4.8升级到1.6.4,升级完成之后,发现ng-table不能用了.主要报错信息是ng-table中data.slice is not ...

  8. Srtuts2实现登录界面（不连接数据库）报错（一）

    二月 28, 2014 11:32:02 下午 org.apache.catalina.core.AprLifecycleListener init 严重: An incompatible versi ...

  9. servlet上传文件报错（三）

    1.具体报错如下 null null Exception in thread "http-apr-8686-exec-5" java.lang.OutOfMemoryError: ...

  10. Linux系统挂载NTFS文件系统

     今天尝试并成功的将一块500G的移动硬盘挂载到了RHEL5的系统上,甚感欣慰.想到也许以后自己或其他同学们会有类似经历,于是尽量细致的记录于此.     无论是一块安装了Windows/Linu ...