再探jQuery

再探jQuery

  jQuery是一个JavaScript库,它极大的简化了JavaScript编程,虽然目前网络上有大量开源的JS框架,但是jQuery是目前最流行的JS框架,而且提供了大量的扩展。包括Google、Microsoft、IBM等大公司都在使用jQuery框架,值得注意的是,jQuery团体知道JS咋不同浏览器中存在这大量的兼容性问题,所以jQuery兼容所有主流浏览器,包括Internet Explorer 6!

 

第一部分:使用方法

 那么如何使用jQuery呢?很简单,只需要在jQuery.com下载jQuery并引入置于</body>的上面即可,如下所示:

<script src="jquery-1.10.2.min.js"></script>

   如果你不希望下载并存放jQuery,也可以通过CDN(内容分发网络)引用它。其中,百度、新浪、谷歌、微软的服务器都存有jQuery。

 比如百度CDN:

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

    不推荐google的CDN,因为google产品在中国很不稳定。

    使用这些大公司的CDN有什么好处呢?  

  许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。

  补充CDN概念:CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快更稳定。使得用户可以就近取得所需内容,解决Internet网络拥挤的状况,从而提高用户访问网站的响应速度。

第二部分:jQuery语法

 1. jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作。基础语法如下:

$(selector).action()

  • 美元符号$定义jQuery
  • 选择符(selector)"查询"和“查找”HTML元素
  • jQuery的action()执行对元素的操作

实例如下:

  • $(this).hide()-隐藏当前元素
  • $("p").hide()-隐藏所有<p>元素
  • $("p.test").hide()-隐藏所有class="test"的p元素

2.文档就绪事件

$(document).ready(function(){
    //此处开始写jQuery代码
});

 这句代码的意思是再文档完全加载之后再运行jQuery代码。

文档就绪事件可以简写为:

$(function(){
      //开始写jQuery代码
});

  注意到结尾处都有一个分号作为结束。

第三部分:jQuery选择器

  jQuery选择器基于元素的id、类、类型、属性、属性值等查找(或选择)HTML元素.这些都是基于存在的css选择器,除此之外,它还有一些自定义的选择器。值得注意的是:jQuery中所有的选择器都以美元符号开头。下面作简单的介绍。

  1.元素选择器

  jQuery元素选择器基于元素名选取元素。 如$("p")为在页面中选区所有的<p>元素,注意到p是由双引号括起来的

  2.#id选择器

  jQuery中#id选择器通过HMTL中的id属性选取指定的元素。如$("#text"),由于元素的id是唯一的,所以获得的元素也只有一个。

3. .class选择器

jQuery中.class选择器通过HTML中的class属性选取指定的元素。如$(".test"),由于元素的class不是唯一的,所以获取的元素可能不止一个。

4. $("*"),选取所有的元素。

5. $(this),选取当前的HTML元素,注意:$(this)中的this不需要双引号括起来。

6.$("p:first"),选取第一个p元素。

      7.$("p.intro"),选取类名为class的p元素。

  8.$("ul li:first"),选取第一个ul下的第一个li元素。

9.$("ul li:first-child"),选取每个ul下的第一个li元素。   注意和8的区别。

10.$("[href]"),选取含有属性href的元素。

11.$("a[href!=‘_blank‘]"),选取href属性的属性值不为_blank的a元素。注意:用单引号将属性值括起来。

      12.$("a[href=‘_blank‘]"),选取href属性的属性值为_blank的a元素。

13.$(":button"),选取所有type=button的input元素和button元素。

14.$("tr:even"),选取偶数行的tr元素。

15.$("tr:odd"),选取奇数行的tr元素。

第四部分:jQuery事件

  

时间: 2024-08-04 10:12:15

再探jQuery的相关文章

再探Linux动态链接 -- 关于动态库的基础知识

  在近一段时间里,由于多次参与相关专业软件Linux运行环境建设,深感有必要将这些知识理一理,供往后参考. 编译时和运行时 纵观程序编译整个过程,细分可分为编译(Compiling,指的是语言到平台相关目标文件这一层次)和链接(Linking,指目标文件到最终形成可执行文件这一层次),这个总的过程可称为编译时:就动态链接而言,还存在一个运行时,即程序在被操作系统加载的过程中,系统将该程序需要的动态库加载至内存到程序开始运行的这一段过程.明确这两个过程在一般linux开发中的地位,以及了解每个"

再探css3

再探css3 我们知道,这几年来智能手机的高速发展使得人们使用移动端上网的时间和人数已经超过了PC端.例如在2015年,就中国电商而言,各电商平台在移动端持续发力,移动端购物占比不断攀升,双11期间,天猫交易额突破912亿元,其中移动端交易额占比68%,京东移动端下单量占比达到74%,其余各大电商平台移动端的支付比例也在60%-80%之间.即移动端在2015年超越PC端,成为网购市场的主流选择.这也使得网页设计师需要更加注重移动端的网页制作,而移动端对于HMTL5和CSS3目前已经支持的非常好了

【再探JNI】

上一次了解了一点JNI,然后不甘心的找到了JNI的官方文档.(官方文档绝对是一个最好的学习资料),百度找出来的一些资料大多数是比较零零碎碎的,不具有系统学习的可能,对于我这样的初学者,先全面的了解一个技术比往一个死角里钻研要好很多.并且百度出来的部分资料估计就是跟我这样的半吊子水平还不到的人的一些心得体会呢.因此,个人建议是看官方文档去全面了解一项技术,然后不理解的地方去再去搜集资料.加上自己的理解和实践,这样会进步的快一点. 好了,闲话少说.进入今天的真题.<再探JNI> (1)什么时候用J

再探 butterfly.js - grunt.js篇(一)

再探 butterfly.js - grunt.js篇(一) 神器 grunt.js 久仰grunt.js的大名,学习grunt.js一直是我todo List的第一位.趁着新春佳节来临之际(打酱油的日子),就来填了这个坑,完了这个心愿. grunt.js的强大,强大在于它拥有很多用途丰富的插件,和不同插件之间的联动实现更牛逼的功能. 这里默认大家已经安装了npm和会用npm install等指令,就不详细讲了.下面讲用到grunt-contrib-watch和grunt-contrib-con

【足迹C++primer】33、再探迭代器

再探迭代器 这里有插入迭代器,有流迭代器,反向迭代器,移动迭代器. 插入迭代器 这是一种迭代器适配器,接受一个容器,生成一个迭代器,实现向给定容器添加元素. 插入迭代器有三种类型,差异在于元素插入的位置 back_inserter创建一个使用push_back的迭代器. front_inserter创建一个使用push_front的迭代器. inserter创建一个使用insert的迭代器. void fun1() { list<int> lst={1,2,3,4}; list<int&

再探oVirt-配置一个2节点的ovirt环境

日期:2015/11/4 - 2015/11/5 主机:engine, node01, node02 目的:再探oVirt-配置一个2节点的ovirt环境 操作内容: 一.基础操作 1.资源 ovirt engine: engine ovirt node: node01, node02 2.hosts 10.50.200.141 engine.ovirt 10.50.200.101 n101.ovirt 10.50.200.102 n102.ovirt 3.防火墙放行同一个局域网内的访问限制 后

[老老实实学WCF] 第五篇 再探通信--ClientBase

原文:[老老实实学WCF] 第五篇 再探通信--ClientBase 老老实实学WCF 第五篇 再探通信--ClientBase 在上一篇中,我们抛开了服务引用和元数据交换,在客户端中手动添加了元数据代码,并利用通道工厂ChannelFactory<>类创建了通道,实现了和服务端的通信.然而,与服务端通信的编程模型不只一种,今天我们来学习利用另外一个服务类ClientBase<>来完成同样的工作,了解了这个类的使用方法,我们对服务引用中的关键部分就能够理解了. ClientBase

再探 butterfly.js - 奇异的留白

再探 butterfly.js - 奇异的留白 事情经过 在 梓凡兄 捣鼓他的 豆瓣FM 播放器的时候,发现了butterfly.js会在ipad的横屏模式(landscape mode)的时候对<html>添加class="ipad ios7".更加离奇的是在butterfly.css有以下样式: @media (orientation:landscape){ html.ipad.ios7 > body{ position:fixed;bottom:0;width:

通过Android源码分析再探观察者模式(二)

接着上篇文章,现在在通过Android实际开发和源码再探观察者模式,listview是我们日常开发中必用的控件,虽然之前就有listview的替代品(recyclerview),现在不去深究两个控件到底谁好谁差,但有一点需要强调下,它们之间有一大相同点,都是通过观察者模式去实现数据更新. 首先,我们先去看一个简单的例子 /** * * created by zero on2016-6-1 * * 通过listview再探观察者模式 * */ public class MainActivity e