`
xf_zhanghaidong
  • 浏览: 28279 次
  • 性别: Icon_minigender_1
  • 来自: 襄樊
社区版块
存档分类
最新评论

JQuery知识点

阅读更多
.
$("#msg").html();    //返回id为msg的元素节点的html内容。

$("#msg").html("<b>new content</b>");

//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content



$("#msg").text();    //返回id为msg的元素节点的文本内容。

$("#msg").text("<b>new content</b>");

//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>



$("input").val(); //返回表单输入框的value值

$("input").val("test"); //将表单输入框的value值设为test





集合处理功能:

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。

包括两种形式:

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})

//为索引分别为0,1,2的p元素分别设定不同的字体颜色。



$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})

//实现表格的隔行换色效果



$("p").click(function(){alert($(this).html())})   

//为每个p元素增加了click事件,单击某个p元素则弹出其内容



line-height:该属性是设定字体之间的行高

text-transform:字母大小写设定



1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

//当鼠标放在表格的某行上时将class置为over,离开时置为out。

$("tr").hover(function(){

$(this).addClass("over");

},

function(){

$(this).addClass("out");

});



(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){alert("Load Success")})

//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价



(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

//每次点击时轮换添加和删除名为selected的class。

$("p").toggle(function(){

   $(this).addClass("selected");

},function(){

   $(this).removeClass("selected");

});



(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。

例如:

$("p").trigger("click");    //触发所有p元素的click事件


(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定

从每一个匹配的元素中(添加)删除绑定的事件。

例如:

$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件

$("p").unbind(); //删除所有p元素上的所有事件

$("p").unbind("click") //删除所有p元素上的单击事件

分享到:
评论

相关推荐

    jquery知识点整理

    jQuery知识点整理 jQuery是当前最流行的JavaScript库之一,提供了许多有用的方法和属性来简化Web开发。下面是对jQuery知识点的整理: 基本概念 * jQuery对象:使用$符号来声明jQuery对象,如:`$()`或`jQuery()` ...

    5张思维导图梳理jQuery知识点

    以下是对这5张思维导图中jQuery知识点的详细梳理: 1. **选择器** - `ID选择器 (#id)`: 通过元素的ID获取单一元素,如`$("#myID")`。 - `类选择器 (.class)`: 选取具有特定类的所有元素,如`$(".myClass")`。 - ...

    史上最全面的jquery知识点归纳总结

    史上最全面的jquery知识点归纳总结

    jquery知识点总结.md

    jquery

    jquery课件知识点

    最新jquery技术,完美解决方案

    jQuery知识点.docx

    在本篇笔记中,我们将深入探讨 jQuery 的一些核心知识点。 首先,我们关注初始化过程。`$(document).ready()` 与 `window.onload` 都用于在页面加载完成后执行代码,但它们有区别。`$(document).ready()` 在 DOM ...

    jquery知识点

    jquery网页技术,修改,追加,删除Class样式,网上找的博客,对于项目应用jquery技术很有帮助,菜鸟一个本人,喜欢交流java技术

    Jquery网页部分内容加载

    总的来说,"Jquery网页部分内容加载"涉及到的关键知识点包括jQuery的动态内容加载方法、图片延迟加载、无限滚动实现以及性能优化策略。通过这些技术,开发者可以创建更加高效、响应式的网页,提升用户体验。

    jquery手册(jquery.cuishifeng.cn网页版)2

    以下是一些关键的jQuery知识点: 1. **选择器**: jQuery的选择器允许你高效地选取DOM元素,如`$("#id")`选取ID为指定值的元素,`$(".class")`选取所有class为指定值的元素,`$("tag")`选取所有特定类型的元素。 2....

    jQuery基础知识点总结(必看)

    在本文中,我们将深入探讨 jQuery 的基础知识点,包括 jQuery 入口函数与 JavaScript 入口函数的区别、jQuery 对象与 DOM 对象的相互转换以及 jQuery 的选择器。 1. **jQuery 入口函数与 JavaScript 入口函数的区别...

    jQuery显示图片详情

    接下来,我们将深入探讨这个特效背后涉及的jQuery知识点。 1. **事件绑定**:jQuery提供了简便的事件绑定方法,如`.on()`,可以用来监听用户的鼠标悬停(hover)事件。在这个特效中,当用户将鼠标移到图片上时,会...

    锋利的jQuery.锋利的jQuery.

    【jQuery 知识点】 jQuery 是一款非常流行的 JavaScript 库,由 John Resig 在 2006 年创建。它的出现极大地简化了 JavaScript 的使用,尤其是在处理 HTML 文档、DOM 操作、事件处理、动画效果和 AJAX 请求等方面。...

    jQuery学习的思维导图

    主要用于学习jQuery的框架

    Jquery相册图片滚动

    在“Jquery相册图片滚动”中,主要涉及以下几个jQuery知识点: 1. **选择器**:jQuery提供了丰富的选择器,如ID选择器("#id")、类选择器(".class")、属性选择器("[attr=value]")等,可以方便地定位到HTML中的特定...

    jQuery帮助文档

    **jQuery帮助文档** ...由于其简洁的API和高效的功能,jQuery...通过深入理解和应用这些jQuery知识点,开发者能够更高效地构建交互性强、响应迅速的网页应用。这个jQuery帮助文档将是你在开发过程中不可或缺的参考资料。

    jquery知识总结

    本总结将深入探讨 jQuery 的核心概念、选择器、DOM 操作、事件处理、动画效果、Ajax 交互以及插件使用等关键知识点。 1. **核心概念** - **选择器**: jQuery 的选择器基于 CSS,如 `$("#id")` 选取 ID 为 id 的...

    jQuery插件——imgbox(点击图片查看大图)

    **jQuery 插件 Imgbox 知识点详解** 在网页设计和开发中,展示图片时,经常需要提供一种方式让用户可以放大查看细节。jQuery 插件 Imgbox 正是为了解决这一需求而诞生的。它允许用户点击缩略图,以弹出窗口的形式...

    jQuery实现点名器随机抽奖特效代码.zip

    掌握这些jQuery知识点,你就能理解并修改这个点名器或抽奖程序,甚至可以扩展它以满足更多定制化的需求。对于初学者,这是一个很好的实践项目,可以帮助巩固jQuery基础,同时学习如何将前端技术应用于实际应用场景。

    jquery实现弹窗表单填写提交

    这里涉及的jQuery知识点包括`event.preventDefault()`防止页面刷新,以及`$.ajax()`进行异步请求: ```javascript $("#myForm").submit(function(event) { event.preventDefault(); // 阻止表单默认提交 var ...

    jquery小游戏实例

    在"jquery小游戏实例"中,我们将探讨以下几个关键的jQuery知识点: 1. **选择器**: jQuery的选择器类似于CSS选择器,用于在DOM树中定位元素。例如,`$("#myID")`用于选取ID为"myID"的元素,`$(".myClass")`则选取...

Global site tag (gtag.js) - Google Analytics