一.定义

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. 64位Kali无法顺利执行pwn1问题的解决方案

    问题描述 ​ 环境:VMware Fusion + kali-linux-2018.1-amd64.iso ​ 问题:在Terminal利用./pwn1执行pwn1会出现 bash: ./pwn1:没 ...

  2. Java AES加密案例

    AES加密原理 http://www.blogjava.net/amigoxie/archive/2014/07/06/415503.html PHP 加密 https://segmentfault. ...

  3. Python基础学习参考（六）：列表和元组

    一．列表 列表是一个容器,里面可以放置一组数据,并且列表中的每个元素都具有位置索引.列表中的每个元素是可以改变的,对列表操作都会影响原来的列表.列表的定义通过"[ ]"来定义,元素 ...

  4. vue之render基本书写方法

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...

  5. NLP+句法结构（三）︱中文句法结构（CIPS2016、依存句法、文法）

    摘录自:CIPS2016 中文信息处理报告<第一章 词法和句法分析研究进展.现状及趋势>P8 -P11 CIPS2016> 中文信息处理报告下载链接:http://cips-uplo ...

  6. CSDN博客添加量子恒道统计代码步骤

    CSDN博客添加量子恒道统计代码步骤. 1. 去量子恒道网站统计 注册账户: 2. 添加已有的CSDN博客地址: 3. 添加博客后恒道代码里面会给你一个JavaScript脚本,记下里面的一串数字: ...

  7. Flash Builder4破解步骤

    Flash Builder4破解步骤 1.安装Flash Builder4.0试用版 2.找到Flash Builder4的安装路径,查找如下相应的文件 3.修改如下文件下的文件 (1)找到Adobe ...

  8. java.io.FileNotFoundException: /opt/apache-tomcat-7.0.57/conf/server.xml (权限不够)

    1 错误描述 youhaidong@youhaidong:~$ cd /opt/apache-tomcat-7.0.57 youhaidong@youhaidong:/opt/apache-tomca ...

  9. 学习笔记：Vue+Node+Mongodb构建简单商城系统（一）

    所需前置知识: HTML.CSS.JS.Vue.ES6.Npm.Webpack.Node.Express.Mongodb 项目整体架构: IDE:webstorm: 项目建立过程(cmd常用命令行指令 ...

  10. Django学习-23-ModelForm

    Model + Form ----> 验证 + 数据库操作 class UserInfo(models.Model): username = models.CharField(max_lengt ...