jQuery定义

最新推荐文章于 2023-03-10 16:13:26 发布
最新推荐文章于 2023-03-10 16:13:26 发布
阅读量508 收藏
点赞数
文章标签： jquery javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51945098/article/details/120622571
版权

1.jQuery定义（封装好的js）
jQuery由美国人John Resig于2006年创建，
jQuery是目前最流行的JavaScript 程序库 ，
它是对JavaScript对象和函数的封装。

它的设计思想是write less,do more。
在这里插入图片描述
包含关系

java开发工程师 jQuery用的多 部分需求 方便代码量少
前端 js用的多 所有的需求

题外话：jQuery 和 DOM区别（摘录）
DOM对象，即是我们用传统的方法(javascript)获得的对象。

jQuery对象即是用jQuery类库的选择器获得的对象;
它就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。

var dom = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;

2.为什么使用jQuery?

(1)js实现隔行换色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
	<script type="text/javascript">
	window.onload = function(){
	 	var trs = document.getElementsByTagName("tr");
	 	for(var i=0;i<trs.length;i++){
		 	if(i%2==0){
			trs[i].style.background = "red";
		 	}
		}
	}
	</script>
  </head>
  
  <body>
    	<form action="">
    		<table>
    			<tr><td>序号</td><td>订单号</td><td>商品名称</td><td>价格</td></tr>
    			<tr><td>1</td><td>32</td><td>53</td><td>价35</td></tr>
    			<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
    			<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
    			<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
    			<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
    			<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
    			<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
    		</table>
    	</form>
  </body>
</html>

在这里插入图片描述
(2)jQuery实现隔行换色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("tr:even").css("background","red");
		});
	</script>
  </head>
  //省略，与上方一样
</html>

3.jQuery语法结构

$(selector).action(); //$(选择器).action(事件)；
$(function(){}); //初始化函数，必须要写。

工厂函数$()： 将DOM对象转化为jQuery对象
选择器 selector： 获取需要操作的DOM 元素
方法action()： jQuery中提供的方法，其中包括绑定事件处理的方法

4.引入jQuery类库
jquery-1.8.3.min (.js) 放在js文件夹里

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>

写程序时，还需要加<script type="text/javascript"></script>
不能再原来的基础上写。

同时也可以在网上引入比如

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

题外话：
jquery1.8 编译的 HTML 帮助文件 (.chm) api
相当于新华字典

ctrl + f 查找

5.jQuery-HelloWorld-实现弹出提示框

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" >
        $(function(){
            alert("快乐");
        });
</script>

在这里插入图片描述

和body里的内容 同时执行

6.jQuery应用实战

6.1 addClass( )添加样式
addClass( )添加样式

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
	<style type="text/css">
		.h{
			background:red
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	 $(function(){
		$("tr:even").addClass("h");
//获取对应的偶数行
	});
	</script>
  </head>

  <body >
    	<form action="" >
    		<table >
    			<tr><td>序号</td><td>订单号</td><td>商品名称</td><td>价格</td></tr>
    			<tr><td>1</td><td>32</td><td>53</td><td>价35</td></tr>
    			<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
    			<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
    			<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
    			<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
    			<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
    			<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
    		</table>
    	</form>
  </body>
</html>

在这里插入图片描述
6.2 css( )设置样式

</script>
	<script type="text/javascript">
	 $(function(){
		 $("tr:even").css("background","red");
	});
</script>

在这里插入图片描述
6.3 show( )、hide( )元素显示和隐藏

<script type="text/javascript">
$(document).ready(function(){
//(document).ready 新的省略不写
  $(".btn1").click(function(){
  	$("p").hide();
  });
  $(".btn2").click(function(){
  	$("p").show();
  });
});
</script>


<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>

在这里插入图片描述
点击hide隐藏，点击show出现。
在这里插入图片描述
6.4 next()链式操作

next 是 下一个

<body>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<script>
$('li.third-item').next().css('background-color', 'red');
</script>
</body>

在这里插入图片描述
6.5 css({})隐式迭代（数组遍历）

$(function() {
        $("li").css({"font-weight":"bold","color":"red"});
 });

案例：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
//每个p进行遍历
</script>


<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>

在这里插入图片描述在这里插入图片描述
6.6 DOM对象和jQuery对象的转化
除了jQuery对象就是DOM对象

(1)DOM对象转为jQuery对象

var two =document.getElementById("2"); //DOM对象
var $two_new =$(two); //DOM对象转化为jQuery对象

前面的$可以省略，建议要加，方便别人看懂

typeof 不用 这边判断用 instanceof 也是 特殊的一个

(2)jQuery对象转为DOM对象

第一种方式:

var $two_new =$ ("#two "); //jQuery对象
var two_after =$two_new [0];     //DOM对象

第二种方式:

var $two_new =$("# two ");  //jQuery对象
var two_after2 =$two_new.get(0); //DOM对象

举例：

<script src="js/jquery-1.8.3.min.js" type="text/javascript">
</script>
    <script>
        $(function(){
            var two = document.getElementById("2");

            var $two_new = $(two);//jQuery对象

            var two_after = $two_new[0];//DOM对象
            var two_after = $two_new.get(0);//DOM对象

            if(two_after instanceof jQuery){
                alert("jQuery对象");
            }else{
                alert("DOM对象");
            }
        });
    </script>


<body>
    <div>快乐</div>
    <div id="2">你好</div>
    <div>真棒</div>
</body>

7.扩展-初始化函数-$(document).ready()与window.onload的区别
在这里插入图片描述
window.onload的执行时机：
必须等待网页中所有的内容加载完毕后
（包括图片）才能执行

如果有两个window.onload，那么会执行第二个。

题外话：
初始化函数
当<script></script>写在上面时，需要初始化函数，
$(document).ready(function(){}）；
当写在下面时，就不用写。

jQuery为多元素添加统一样式（摘录）

$('p,#id,.class').css({'color':'#fff','font-size':'14px'});

----2021.10.06&10.07

好好学java的xz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery定义插件的方法
10-23
有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就...其实你只是了解一点皮毛，并不知道其中的道理，下面通过本篇文章给大家介绍jquery定义插件的相关知识，感兴趣的朋友一起学习吧
JavaScript jQuery 中定义数组与操作及jquery数组操作
10-23
主要介绍了JavaScript jQuery 中定义数组与操作及jquery数组操作的相关资料,需要的朋友可以参考下
jQuery常见方法汇总
林中明月间丶
03-10 2643
语法：父元素jQuery对象.append(新创建的jQuery对象)语法：新创建jQuery对象.appendTo(‘父元素选择器’/父元素jQuery对象)
web前端学习-第二十一天
qq_45654474的博客
09-29 221
jQuery笔记1jQuery1. 基础知识1.1基本概念1.2基本语法2. 选择器基本选择器：层次选择器：过滤选择器事件什么是事件常见的DOM事件 jQuery 1. 基础知识 1.1基本概念 jQuery是JS库，能够帮助我们轻松实现一些原本比较麻烦的功能 jQuery每个版本分两个小版本：压缩版与未压缩版，压缩版文件较小，但是没有排版和注释 不便于阅读；未压缩版文件较大，有排版和注释，便于阅读 jQuery实际上就是一个js文件，加载到页面就可以直接使用了 也可以通过CDN（Content Distr
jquery自定义类的封装
QDY5945的博客
10-24 848
如何用jquery自定义一个类？（demo参考） /*简单使用*/ (function($){ 　//el操纵对象，option属性值 　 $.love = function(el,opt...
Web开发之jQuery框架的使用
nuist_NJUPT的博客
08-24 1792
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jquery它的插件机制特别丰富,在开发中可以选择非常多的相关插件，例如，表单校验插件，树型结构。
jquery自定义类方法一例
hsg77的专栏
09-29 3499
/** *定义：form控件的js类函数 * vp:hsg * create date:2015-09 */ //定义js表单对象 FormObject ;(function(){ $.FormObject = function () { //var e = $('#' + e_name); //默认属性值 v
jQuery定义背景动态切换效果的方法
10-24
主要介绍了jQuery定义背景动态切换效果的方法,实例分析了jQuery操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery定义的漂亮有序和无序列表效果(看够了html自带的列表).zip
11-06
在这个项目中，"jQuery定义的漂亮有序和无序列表效果"就是利用jQuery来增强HTML列表的外观和功能。 首先，我们需要引入jQuery库。这通常通过在HTML文档的`<head>`部分添加jQuery的CDN链接或下载本地副本并引用它来...
怎样用jQuery自定义函数方法，用$可调用
biubiubiu
01-14 6971
2021-01-14 楼上在装修，电钻交响乐，可真是吵死我了… 一、jQuery自定义函数的几种方法 1. 方法一：$.fn.functionName 最先登场的是百度经验提供的方法，需要绑定某个DOM元素使用 <button id="btn">test</button> <script> //定义方法 $.fn.myFunc1 = function(param){ $(this).on('click',function(){ console.log.
jquery 自定义方法调用示例
07-27
NULL 博文链接：https://chenshuai365-163-com.iteye.com/blog/737126
jQuery基本概念
学无止境
11-03 447
jQuery基本概念
jquery自定义函数
xcc_2269861428的博客
03-24 4419
前言：使用过java开发的同学，在开发某个模块时，可肯定会将公共的代码抽离出来，放在一个公共的类里，这样以后用到这个模块，直接调用就可以了。不用在每个类里面都重复的写着同样的代码。而且一定这个方法有问题，我们只修改这个方法就行了，不需要去每个类里面都改一遍。那么前端是否也可以这样实现呢？我这里使用2种方式。 第一种：jquery的extend方法 首先看下jquery自带的方法css 很...
jQuery和js自定义函数和文件的方法（全网最全）
像雾像雨又像风_的博客
08-07 7537
我们在编写jQuery或者js的时候常常要自定义函数，并且写入一个js文件中，方便引入html中调用。那么就涉及到如何在js文件中书写jQuery和js自定义函数的问题了。 在介绍自定义函数之前必须先来了解下js的自执行函数。 一、js自执行函数介绍 我们通常将JS代码写在一个单独的JS文件中，然后在页面中引入该文件。但是，有时候引入后会碰到变量名或函数名与其它JS代码冲突的问题。那么如何解...
jquery函数定义问题
konnysnow的专栏
11-23 1395
参考：https://segmentfault.com/q/1010000004117497 参考：https://www.cnblogs.com/gfl123/p/8080484.html 参考：https://www.cnblogs.com/chris-oil/p/4862083.html （js中(function(){…})()立即执行函数写法理解）   一、函数执行问题 函数后面...
jquery自定义方法
So_hhh的博客
09-19 1911
为什么使用jquery方法？ 为了能减少代码的复用性，能使代码得到更好的提升，就跟我们呢自定义的增删该查是一个道理。 下面用代码来看看我们自定义的jquery方法的好处吧！！！ 用方法来改变表格的背景颜色吧   先搭好我们自己的框架，将我们的代码分层，能更好的阅读代码。 这个就跟我们的三层道理是一样的。   修改表单颜色的css分好之后，放入我们呢定义的css文件中 把改...
JQuery简介 - 什么是jQuery
热门推荐
柯晓楠
01-15 4万+
概念 官方概念： jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。 个人理解： jQuery是JavaScript的一个工具库，工具库就是指封装好的JavaScript函数，可以直接在程序中进行调用，那jQuery就是一款非常流行的JavaScript库。jQ...
jquery 定义函数
最新发布
11-01
jQuery定义函数有两种方式：$.fn.extend和$.extend。其中，$.fn.extend用于给jQuery对象添加自定义方法，而$.extend用于给jQuery命名空间添加函数方法。 $.fn.extend方法的使用格式为：$.fn.extend({'方法名':...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值