一.定义

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. SpringBoot SpringSecurity4整合,灵活权限配置,弃用注解方式.

    SpringSecurity 可以使用注解对方法进行细颗粒权限控制,但是很不灵活,必须在编码期间,就已经写死权限 其实关于SpringSecurity,大部分类都不需要重写,需要的只是妥善的配置. 每 ...

  2. 64位Kali无法顺利执行pwn1问题的解决方案

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

  3. Hadoop压缩

    为什幺要压缩? 压缩会提高计算速度?这是因为mapreduce计算会将数据文件分散拷贝到所有datanode上,压缩可以减少数据浪费在带宽上的时间,当这些时间大于压缩/解压缩本身的时间时,计算速度就会 ...

  4. ubuntu10.04 安装配置tftp服务

    tftpd-hpa 是一个功能增强的TFTP服务器.它提供了很多TFTP的增强功能,它已经被移植到大多数的现代UNIX系统. 1.安装 sudo apt-get install tftpd-hpa t ...

  5. u盘安装ubuntu10.04 、11.04 server

    10.04 先将 ubuntu server 的 iso 放到优盘上,然后在提示无法找到光驱时,按 alt+f2 打开一个新的 console 窗口,将 iso mount 上,具体操作如下: ls ...

  6. 高级DirectDraw

    使用高彩模式 上一章中说了可以用16位的色彩深度,但是16位的色彩深度的数据表示模式可以有两种:Alpha.5.5.5(or X.5.5.5) 和 5.6.5(这是16位色彩最常用的).对于使用哪种1 ...

  7. CWnd *和HWnd转换

      CWnd *和HWnd转换 CWnd*得到HWnd CWnd    wnd;   HWND    hWnd; hWnd    =    wnd.m_hWnd;           //    or ...

  8. 【mysql】mysql主从复制

    mysql主从复制配置 主服务器:192.168.0.100 从服务器 192.168.0.101 主服务器配置 my.ini(window下 linux 下是my.cnf) #开启二进制日志 log ...

  9. Linux显示版本信息并退出

    Linux显示版本信息并退出 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ cat --version cat (GNU coreutils) 8.21 Co ...

  10. 2016四川省赛 Floyd-Warshall

    这题真的有毒 首先你忽略 N-M < 100 的条件你就gg吧 其次就算你知道了怎么做之后 还有可能因为写vector或者各种常数大的原因被卡 #include<iostream> ...