`
303178394
  • 浏览: 38031 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

TryjQuery官方jQuery视频学习笔记(一)--------选择器

阅读更多
    差不多一个月前悠闲的时候,把jQuery官方教学视频看了,并做了官方的练习,记了一些笔记,今天把之前的笔记整理成博文。也都只是基础的jQuery。
    1、$(document).ready()
$(document).ready(function(){
    alert('DOM加载完毕!');
});


    $(document).ready()会在DOM加载完毕就执行,而不等内容加载完毕,也就是用户可以第一时间就可以看到页面特效。可以有多个,可以简写(官方的练习用简写竟然提示错误)。
$(function(){
    alert('DOM加载完毕!');
});

    而window.onload则要等页面所有内容加载完才执行且只有一个。
   
    2、选择器
   $('p2') //选择名字
   $('.class')  //选择class
   $('#id')  //选择id

   $('#id li')   //所有id=”id”标签内的li标签
   $(“#id”).find(“li”)//用遍历的方法也能找到所有的li元素,且效率比只有用选择器的效率高

   $('#id > li')  //所有直属子标签,就是直接子节点
   $(“#id”).children(“li”)  //所有直属的li元素,效率高于直接用选择器
   $('#id , .class') //逗号用来复选。选择多个标签
   $(“#id li:first”) //第一个元素
   $(“#id li:last”)// 最后一个元素
   $(“#id li:odd”) //奇数个数的元素(由于从0开始算,所以是第二个)
   $(“li”).first().next()//用遍历的方法获得第二个元素,效率高于直接用选择器
   $(“#id li:even”) //偶数个数的元素
   $(“li”).last().prev()//倒数第二个
   
   $(“li”).first().parent() //获得父元素
   
   $(this) //触发的事件内选择自身

   $(this).closest(‘vacation’) //获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上

   $(‘.vacation’).filter(‘.onsale’) //过滤出class = vacation的元素,再过滤出class=onsale的元素。这样选择的效率比$(‘.vacation,.onsale’)高

   $(‘.vacation’).filter(':even')  //过滤出基数,索引从0开始
   $(‘.vacation’).filter(':odd')  //过滤出偶数,索引从0开始


   
    吃下早饭准备上班,明天继续。
2
6
分享到:
评论

相关推荐

    jquery.datepicker-zh-CN.js

    <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...

    插件jquery-ui-timepicker-addon.js

    jquery插件jquery-ui-timepicker-addon.j

    jquery学习笔记--1

    压缩包中的`jquery-starterkit`可能包含一个基础的jQuery项目模板,用于快速搭建使用jQuery的Web应用。它可能包含了基本的HTML结构、CSS样式和JavaScript脚本,展示了如何引入jQuery库、编写简单的DOM操作和事件处理...

    jQuery 语法学习笔记

    jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...

    jquery 学习笔记源码 1-3章

    《jQuery学习笔记源码1-3章》涵盖了jQuery的基础到进阶内容,是初学者深入理解这一强大JavaScript库的关键步骤。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...

    jQuery动画特效---精通JavaScript+jQuery

    第0课 - 内容概述 - [精通JavaScript+jQuery] 第1课 - JavaScript背景知识-[精通JavaScript+jQuery] 第2课 - JavaScript基础 - [精通JavaScript+jQuery] 第3课 - CSS基础 - [精通JavaScript+jQuery] 第4课 - CSS...

    google 社区 jquery-ui-themes-1.8.12.zip

    在Web开发领域,jQuery UI是一个广泛使用的JavaScript库,它扩展了基础的jQuery功能,提供了丰富的用户界面组件,如日期选择器、对话框、拖放操作等。jQuery UI的核心特性之一就是其可定制的主题系统,允许开发者...

    修改Jquery-UI-DatePicker-可以选择时间

    <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"> jquery-ui-timepicker-addon.js 原包中的文件 <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel=...

    jquery.qtip-1.0.0-rc3.js

    jquery.qtip-1.0.0-rc3.js 弹出层

    jQuery-Timepicker-Addon-master(jquery 日历时间)

    《jQuery-Timepicker-Addon:构建高效日历时间选择器》 在Web开发中,用户界面的易用性和交互性是至关重要的。jQuery-Timepicker-Addon是jQuery库的一个扩展,为网页提供了一种优雅的方式来处理日期和时间的选择。...

    jquery学习-----jquery库讲义

    <script type='text/javascript' src='jquery-1.4-min.js'> <script type='text/javascript' src='script.js'></script> ``` - **使用CDN服务**: 可以通过CDN服务来快速引入jQuery,提高页面加载速度。 ```...

    jquery.ui.datepicker-zh-CN.js

    jquery-ui中文日历控件,使用的时候记得先把文档编码改为UTF-8,否则中文显示乱码!

    jquery-1.3.2.min-vsdoc jquery-1.4.3.min 等等

    标题中的"jquery-1.3.2.min-vsdoc"和"jquery-1.4.3.min"提到了jQuery库的两个不同版本,分别是1.3.2和1.4.3。这两个版本都是jQuery的核心库文件,以.min表示它们是经过压缩和优化的版本,用于在网页中更快速地加载和...

    jquery-ui-dialog-demo

    jQuery UI 是一个开源的 JavaScript 库,它是基于 jQuery 的扩展,提供了大量的用户界面组件,如拖放、日期选择器、滑块、对话框等。jQuery UI 的设计目标是与 jQuery 核心库无缝集成,为开发者提供了一套完整的前端...

    jquery插件jquery-ui-1.8.2.custom.min.js

    本文将围绕"jquery-ui-1.8.2.custom.min.js"这一jQuery UI插件,深入探讨其核心概念、主要功能以及使用方法。 首先,jQuery UI的核心在于它提供了大量预定义的UI组件,如日期选择器、对话框、滑块、排序列表等。...

    jquery-3.7.0.min.js(jQuery下载)

    jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...

    jquery-ui-timepicker-addon

    jQuery UI Datepicker日期选择插件很好用,但是不满意的是不能精确到时分秒,而jquery-ui-timepicker-addon.js正是基于jQuery UI Datepicker的一款可选时间的插件。 使用方法: 1.把下载的文件包含到页面里面 2....

    jquery插件jquery-ui-1.8.18.custom.min.js及css文件

    首先,`jquery-ui-1.8.18.custom.min.js` 是 jQuery UI 的一个特定版本,1.8.18 表示该版本发布于2012年,是jQuery UI的一个稳定版本。"custom" 指的是这个版本是经过定制的,意味着开发者可能根据项目需求,只包含...

    jquery-easyui-EDT-1.5.5.rar

    而“jquery-easyui-EDT-1.5.5.rar”则是一个包含jQuery EasyUI扩展、PC及移动设备演示以及插件的压缩包,旨在为开发者提供全方位的开发支持。 首先,我们要理解jQuery EasyUI的核心概念。EasyUI是由一系列预先定义...

Global site tag (gtag.js) - Google Analytics