jQuery 学习笔记(TryjQuery)

第一集.
页面加载完成后执行 js 代码: 

$(document).ready(function(){

  $("h1").text("Where to?");

});

第二集.
查找网页元素的方式:

$("h1") 使用标签获取网页元素

$("#ID") 使用标签ID获取网页元素

$(".ClassName") 使用标签类名获取网页元素

CSS

p { ... }
#container { ... }
.articles { ... }

jQuery

$("p");
$("#container");
$(".articles");

第三集.
获取网页元素中的子元素和多种方式获取网页元素的集合:

$("#destinations li"); 获取 id 为 destinations 的网页元素中包含的所有标签为 li 的元素,包含儿子、孙子、子孙万代...。

$("#destinations > li"); 获取 id 为 destinations 的网页元素中直属的标签为 li 的元素,仅包含儿子。

$(".promo, #france"); 获取类名为 promo 或 id 为 france 的多个子元素。

$("#destinations li:first");

$("#destinations li:last");

$("#destinations li:odd");

$("#destinations li:even");

watch out, the index starts at 0

第四集.
使用.first() 的效率比使用伪类:first效率更高:

$("#destinations li");

$("#destinations").find("li");  //速度快

$("li:first");

$("li").first();  //速度快

$("li:last");

$("li").last();  //速度快

$("li").first().next().prev();

$("li").first().parent();

$("#destinations").children("li");

children(), unlike find(), only selects direct children

 

第五集.
把元素<element>添加到目标元素的下级的后面、下级的前面、同级的后面、同级的前面

.append(<element>)

.prepend(<element>)

.after(<element>)

.before(<element>)

把目标元素添加到元素<element>下级的后面、下级的前面、同级的后面、同级的前面

.appendTo(<element>)

.prependTo(<element>)

.insertTo(<element>)

.insertBefort(<element>)

第七集.

.closest() 从当前元素开始遍历,沿DOM树向上遍历,直到找到已应用选择器的一个匹配为止,返回包含零个或一个元素的 jQuery 对象。

.parents() 从父元素开始遍历,沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。

第八集.
获取自定义属性的值

时间: 2024-10-24 12:25:21

jQuery 学习笔记(TryjQuery)的相关文章

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

jQuery学习笔记--JqGrid相关操作 方法列表(上)

1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选中行:$("#jqGrid

jQuery学习笔记10:Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

jQuery学习笔记之过滤器三(向上查找兄弟元素、向下查找兄弟元素)

向上查找兄弟元素的方法:prev方法.prevAll方法.prevUntil方法 向下查找兄弟元素:next方法.nextAll方法.nextUntil方法 向上查找兄弟元素 1.prev方法 2.prevAll方法 3.prevUntil方法 向下查找兄弟元素 1.next方法 2.nextAll方法 3.nextUntil方法 jQuery学习笔记之过滤器三(向上查找兄弟元素.向下查找兄弟元素)

JQuery学习笔记(1)

JQuery学习笔记(1) 认识JQuery 简介 JQuery是一个JavaScript库,语法简洁,有跨平台的兼容性,简化了开发人员遍历html文档.操作dom.处理事件.执行动画和开发Ajax的操作.理念是:写得少,做得多. 优点 1.轻量级.UglifyJS压缩后大小保持在30KB 2.选择器强大. 3.DOM操作封装. 4.可靠地事件处理机制. 5.完善的Ajax. 库类型 jquery.js(开发版) 约229kb,用于学习和开发. jquery.min.js(生产版) 约31kb,

jQuery学习笔记(2014年8月3日)事件委派

jQuery中的事件委托是通过 closest() 来完成的. closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上. 参考资料: jQuery 遍历 - closest() 方法http://www.w3school.com.cn/jquery/traversing_closest.asp jQuery学习笔记(2014年8月3日)事件委派

锋利的JQuery 学习笔记

第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);}) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); ·

jQuery 学习笔记

jQuery 学习笔记 position()是相对父元素的,有top.left两个属性. offset()是相对于document的当前坐标. offsetParent()是获取离元素最近的有定位的父元素. .closet() 获取最近的匹配选择器的父元素. off()移除一个事件处理函数,要删除委托事件需提供对应的选择器. detch()和remove()一样,但是不会移除绑定数据,以便以后添加.empty()是清空该元素的所有子元素.