一.定义

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. nyoj222 整数中的1 数位DP

    从a枚举到b是一定会超时的.此题应该考虑数位dp,也可以理解为递推,假设给定数n,就能在O(32)复杂度算出所有小于等于n的数中1出现的次数,那么给定区间[a, b],solve(b) - solve ...

  2. windows下用pip安装软件超时解决方案

    以前介绍过ubuntu下更换更新源办法,详情见http://www.cnblogs.com/Alier/p/6358447.html 下面讲一下windows下面pip的配置更改,包括下载软件是超时错 ...

  3. java程序调用xfire发布的webService服务（二）

    在上一篇的调用xfire发布的webService服务中,我只是从服务端返回了一个字符串给客户端,却没有测试从客户端传递数据给服务端.而实际应用中一般是不太可能只出现这样的应用场景的,因此我便更进一步 ...

  4. 利用squid 搭建简单的代理服务器

    在虚拟机下做的测试. 虚拟主机1:(双网卡) eth0连接内网 ip地址为 192.168.0.100/24 eth1配置一个虚拟外网的ip 200.168.0.100/24 虚拟主机2: ip:20 ...

  5. Stanford Word Segmenter使用

    1,下载 Stanford Word Segmenter软件包: Download Stanford Word Segmenter version 2014-06-16 2,在eclipse上建立一个 ...

  6. Linux下挂载新硬盘方法

     Linux的硬盘识别在/dev/下建立相应的设备文件.如 sda 表示第一块SCSI硬盘 hda 表示第一块IDE硬盘(即连接在第一个IDE接口的Master口上) scd0 表示第一个USB光 ...

  7. 芝麻HTTP：

    只要你的Scrapy Field字段名字和 数据库字段的名字 一样.那么恭喜你你就可以拷贝这段SQL拼接脚本.进行MySQL入库处理. 具体拼接代码如下: def process_item(self, ...

  8. 深度学习——卷积神经网络 的经典网络（LeNet-5、AlexNet、ZFNet、VGG-16、GoogLeNet、ResNet）

    一.CNN卷积神经网络的经典网络综述 下面图片参照博客:http://blog.csdn.net/cyh_24/article/details/51440344 二.LeNet-5网络 输入尺寸:32 ...

  9. Poj3683：Priest John's Busiest Day

    题意 n对夫妻要结婚,第i对夫妻结婚的婚礼持续时间为[Si, Ti],他们会举行一个仪式,仪式时间为Di,这个仪式只能举行在开头或者结尾举行,要么[Si, Si+Di],要么[Ti-Di, Ti],然 ...

  10. centos7下搭建 MongoDB -01

    距离上次写的一篇mongoDB搭建已经有一年多的时间了,刚好这次在公司搭建好在centos7下的mongodb搭建,简单的做一个记录吧 mongo 是一个基于分布式文件存储的数据库,数据主要存储在磁盘 ...