Jquery学习备忘录

xiaoxiao2021-03-01  36

鉴于我学过一点基础知识,所以这里做一些知识点归纳。

1,一个轻量级的JS库,可以极大的简化JS操作和代码量。

2,语法实例:

在实际运用中可以慢慢领会。

$(this).hide() 演示jQueryhide()函数,隐藏当前的HTML元素。 $("#test").hide() 演示jQueryhide()函数,隐藏id="test"的元素。 $("p").hide() 演示jQueryhide()函数,隐藏所有<p>元素。 $(".test").hide() 演示jQueryhide()函数,隐藏所有class="test"的元素。 $("p.test").hide()-隐藏所有class="test"的段落。

3,语法基础

jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action() 美元符号定义jQuery 选择符(selector)“查询”和“查找”HTML元素 jQuery的action()执行对元素的操作

4,注意

所有 jQuery 函数位于一个 documentready 函数中 $(document).ready(function(){ --- jQuery functions go here ---- }); 防止网页没有加载完就运行,出现无法找到的标签定义等等。 5 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

jQuery元素选择器 jQuery使用CSS选择器来选取HTML元素。 $("p")选取<p>元素。 $("p.intro")选取所有class="intro"的<p>元素。 $("p#demo")选取id="demo"的第一个<p>元素。 jQuery属性选择器 jQuery使用XPath表达式来选择带有给定属性的元素。 $("[href]")选取所有带有href属性的元素。 $("[href='#']")选取所有带有href值等于"#"的元素。 $("[href!='#']")选取所有带有href值不等于"#"的元素。 $("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。 jQueryCSS选择器 jQueryCSS选择器可用于改变HTML元素的CSS属性。

下面的例子把所有p元素的背景颜色更改为红色:

实例:

$("p").css("background-color","red");

6,jQuery名称冲突

jQuery使用$符号作为jQuery的简介方式。

某些其他JavaScript库中的函数(比如Prototype)同样使用$符号。

jQuery使用名为noConflict()的方法来解决该问题。

varjq=jQuery.noConflict(),帮助您使用自己的名称(比如jq)来代替$符号。

7,jQuery 事件

下面是jQuery中事件方法的一些例子:

Event函数

绑定函数至

$(document).ready(function)

将函数绑定到文档的就绪事件(当文档完成加载时)

$(selector).click(function)

触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)

触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)

触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)

触发或将函数绑定到被选元素的鼠标悬停事件

注意点: HTML 元素默认是静态定位,且无法移动。 如需使元素可以移动,请把CSS position 设置为relative absolute

例子:

<scripttype="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({left:"100px"},"slow"); $("#box").animate({fontSize:"3em"},"slow"); }); }); </script> <html> <head> <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> <scripttype="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({left:"100px"},"slow"); $("#box").animate({fontSize:"3em"},"slow"); }); }); </script> </head> <body> <h2>Thisis a heading</h2> <pid="box">This is a paragraph.</p> <p>Thisis another paragraph.</p> <buttonid="start">Click me</button> <p> <button>Click me2</button> </p> </body> </html> 我们可以通过以上例子测试一下,发现要想移动Html 元素做出效果,需要设置position 属性。

8,jQuery效果

函数

描述

$(selector).hide()

隐藏被选元素

$(selector).show()

显示被选元素

$(selector).toggle()

切换(在隐藏与显示之间)被选元素

$(selector).slideDown()

向下滑动(显示)被选元素

$(selector).slideUp()

向上滑动(隐藏)被选元素

$(selector).slideToggle()

对被选元素切换向上滑动和向下滑动

$(selector).fadeIn()

淡入被选元素

$(selector).fadeOut()

淡出被选元素

$(selector).fadeTo()

把被选元素淡出为给定的不透明度

$(selector).animate()

对被选元素执行自定义动画

本段小结:

由于jQuery是为处理HTML事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:

把所有jQuery代码置于事件处理函数中

把所有事件处理函数置于文档就绪事件处理器中

jQuery代码置于单独的.js文件中

如果存在名称冲突,则重命名jQuery

相关资源:敏捷开发V1.0.pptx
转载请注明原文地址: https://www.6miu.com/read-4200029.html

最新回复(0)