JQuery

最新推荐文章于 2022-04-28 10:33:03 发布

clisk

最新推荐文章于 2022-04-28 10:33:03 发布

阅读量159

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/clisks/article/details/100012167

版权

java 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

JQuery

一.简介

1.概述

jQuery是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。

2.主要功能

–1.像 CSS 那样访问和操作 DOM
–2.修改 CSS 控制页面外观
–3.简化JavaScript 代码操作
–4.事件处理更加容易
–5.各种动画效果使用方便
–6.让 Ajax 技术更加完美异步加载
–7.基于jQuery 大量插件
–8.自行扩展功能插件

jQuery 最大的优势，就是特别的方便。比如模仿CSS 获取 DOM，比原生的 JavaScript要方便太多。并且在多个 CSS 设置上的集中处理非常舒服，而最常用的
CSS 功能又封装到单独的方法，感觉非常有心。最重要的是 jQuery 的代码兼容性非常好，你不需要总是头疼

二.用法

1.第一个JQuery

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('button').click(function(){
					alert("aaaa");});
				});
        </script>
	<body>
		<button type="button">按钮</button>
	</body>

$ 代表JQuery对象是JQuery缩写形式

2.常用语法

语法	描述
$(this).hide()	隐藏当前元素
$(“p”).hide()	隐藏所有 < p> 元素
$(“p.test”).hide()	隐藏所有 class=“test” 的 < p> 元素
$("#test").hide()	隐藏所有 id=“test” 的元素
find()	找子元素，层层往下找，找嵌套关系的
next()	相邻元素
remove()	删除节点
text()	设置或返回所选元素的文本内容
html()	设置或返回所选元素的内容（包括 HTML 标记）
val()	设置或返回表单字段的值
attr()	设置属性
append()	在被选元素的结尾插入内容
prepend()	在被选元素的开头插入内容
after()	在被选元素之后插入内容
before()	在被选元素之前插入内容
remove()	删除被选元素（及其子元素）
empty()	从被选元素中删除子元素
addClass()	向被选元素添加一个或多个类
removeClass()	从被选元素删除一个或多个类

3.加载模式

jQuery 页面加载完再去执行

<script>
$(document).ready(function(){
  alert("加载");
});//等待页面结构加载完就可以执行，不需要等待图片加载完成

//加载模式的简写
$(function(){
 alert("加载");
});
</script>

4.对象互换

原生的DOM对象和JQuery对象的互相转换

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
                //原生DOM对象
				var btn=document.getElementById("btn");
				btn.css('background','red');
				
				//经过了Jquery处理之后的Jquery对象
				var btn2=$('#btn'); 
				btn2.css("background","red");
				
				//原生的DOM对象转成Jquery对象 用 $() 包裹一下原生对象
				$(btn).css('background','red');
				
				//query对象 转成 原生的DOM对象 调用get()方法 传入一个索引
				var bb=btn2.get(0);
				bb.style.width="100px";
				});
</script>

5.选择器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id=“lastname” 的元素
.class	$(".a1")	class=“a1” 的所有元素
.class,.class	$(".a1,.a2")	class 为 “a1” 或 “a2” 的所有元素
element	$(“p”)	所有 < p> 元素
el1,el2,el3	$(“h1,div,p”)	所有 < h1>、< div> 和 < p> 元素
:first	$(“p:first”)	第一个 < p> 元素
:last	$(“p:last”)	最后一个 < p> 元素
:first-child	$(“p:first-child”)	属于其父元素的第一个子元素的所有 < p> 元素
:first-of-type	$(“p:first-of-type”)	属于其父元素的第一个 < p> 元素的所有 < p> 元素
:last-child	$(“p:last-child”)	属于其父元素的最后一个子元素的所有 < p> 元素
:nth-last-child(n)	$(“p:nth-last-child(2)”)	属于其父元素的第二个子元素的所有 < p> 元素，从最后一个子元素开始计数
parent > child	$(“div > p”)	< div> 元素的直接子元素的所有 < p> 元素
parent descendant	$(“div p”)	< div> 元素的后代的所有 < p> 元素
element + next	$(“div + p”)	每个 < div> 元素相邻的下一个 < p> 元素
element ~ siblings	$(“div ~ p”)	< div> 元素同级的所有 < p> 元素
:focus	$(":focus")	当前具有焦点的元素
:contains(text)	$(":contains(‘Hello’)")	所有包含文本 “Hello” 的元素
:has(selector)	$(“div:has§”)	所有包含有 < p> 元素在其内的 < div> 元素
:empty	$(":empty")	所有空元素
:hidden	$(“p:hidden”)	所有隐藏的 < p > 元素
[attribute]	$("[href]")	所有带有 href 属性的元素
:input	$(":input")	所有 input 元素
:text	$(":text")	所有带有 type=“text” 的 input 元素
:password	$(":password")	所有带有 type=“password” 的 input 元素
:button	$(":button")	所有带有 type=“button” 的 input 元素
:target	$( “p:target” )	选择器将选中ID和URI中一个格式化的标识符相匹配的< p>元素

6.属性的操作

<head>
 <style>
     .mycss {
            color: red;
            font-size: 200px;
        }
   </style>
        <title></title>
       <script src="js/jquery.min.js"></script>
       <script>
        $(document).ready(function () {
            //获取属性的值
            var text = $('div').attr('id');
            alert(text);
            
            //设置属性
             $('div').attr('class', 'mycss');

            //移除属性
            $('div').removeAttr('class');

        });

    </script>
    </head>
<body>
    <div id="mydiv" class="mycss">
        abc
    </div>
</body>

7.事件

(1)事件的属性介绍

属性	描述
click()	当按钮点击事件被触发时会调用一个函数。
dblclick()	当双击元素时，会发生 dblclick 事件。
mouseenter()	当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave()	当鼠标指针离开元素时，会发生 mouseleave 事件。
mousedown()	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseup()	当在元素上松开鼠标按钮时，会发生 mouseup 事件。
hover()	方法用于模拟光标悬停事件。
focus()	当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
blur()	当元素失去焦点时，发生 blur 事件。
preventDefault()	取消某个元素的默认行为
stopPropagation()	取消事件冒泡
trigger()	触发绑定到被选元素的所有事件

<script>
$("p").click(function(){
  $(this).hide();
});
</script>

(2)事件的绑定与解绑

bind与unbind

unbind删除绑定的事件
$(‘input’).unbind(); //删除所有当前元素的事件
$(‘input’).unbind(‘click’); //删除当前元素的click事件
案例演示：

<script>
//使用unbind参数删除指定处理函数的事件 
function fn1() { alert(1); } function fn2() { alert(2); }

$('input').bind('click', fn1); $('input').bind('click', fn2); 
$('input').unbind('click', fn1); //只删除fn1处理函数的事件
</script>

on与off(推荐使用)

解绑与绑定中的bind和unbind可以用on和off来代替·
用法与bind相同

one

类似于bind，只触发一次

clisk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

JQuery一.简介1.概述jQuery是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。...
复制链接

扫一扫

专栏目录