一.定义

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. homebrew 无法安装提示不能在根目录下使用

    首先提示一点:能谷歌绝对不要百度解决问题. 1.昨天百度了一天,都都没有找到解决方案.因为昨天是20161130日,我的蓝灯FQ软件的流量使用光了.悲催- 2.今天是20161201日,我可以免费使用 ...

  2. easywechat--在thinkPHP5中的使用

    1. 安装 1.1 v-4.0 版本要求 PHP版本在7.0以上 1.2 在项目目录下运行以下命令 若未安装composer,则先安装composer -> http://docs.phpcom ...

  3. filebeat.yml（中文配置详解）

    ################### Filebeat Configuration Example ######################### ####################### ...

  4. Windows平台的PHP之开启COM配置

    Windows平台的PHP如果未配置COM,调用COM组件,错误如下 Fatal error: Class 'COM' not found in XXXXXXXXX php 根目录的 ext 文件夹下 ...

  5. Flex中的FusionCharts 3D饼图

    1.3D饼图设计源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns: ...

  6. JDBC异常之数据库表不存在

    JDBC异常之数据库表不存在 1.具体错误如下: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException:Table 'YHD.t_yhd_ ...

  7. Struts2实现文件上传报错（二）

    1.具体报错如下 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -he ...

  8. Column 'id' in where clause is ambiguous

    1.错误描述 org.hibernate.exception.ConstraintViolationException: error executing work at org.hibernate.e ...

  9. Java中的空值判断

    Java中的空值判断 /** * 答案选项: * A YouHaidong * B 空 * C 编译错误 * D 以上都不对 */ package com.you.model; /** * @auth ...

  10. INS-20802

    1.错误描述 2.错误原因 安装的是64位数据库,由于在设置数据库配置密码时用的是数字开头,取消时出现这个错误 3.解决办法 重新安装Oracle