jquery介绍

jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器,目前使用最多的是1.x系列的。

jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jquery加载

将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。

<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

可以简写为:

<script type="text/javascript">

$(function(){

     ......

});

</script>

jquery选择器

jquery用法思想一 
选择某个网页元素,然后对它进行某种操作

jquery选择器 
jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

$(document) //选择整个文档对象
$('li') //选择所有的li元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

对选择集进行修饰过滤(类似CSS伪类)

$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素

对选择集进行函数过滤

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素

选择集转移

$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素

jQuery(一)的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  3. Jquery的点击事件,三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  9. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  10. 浅谈 jQuery 核心架构设计

    jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...

随机推荐

  1. centos 7.2 下 nginx 1.14.1 安装部署

    Nginx1.14.1安装部署 1.环境: 所有源码在跳板机kx的/web/soft下 2.安装依赖: [root@bogon src]# yum install -y libxml2 openssl ...

  2. 第一天学JAVA,下载JDK,配置JAVA环境变量!!!

    步骤一:下载JDK https://www.oracle.com 我们首先进入到这个网站下载我们运行JAVA的所必须的JDK 进入到这个网站按照图示进入到下一个页面 因为刚学JAVA,我们的JDK版本 ...

  3. 风火轮SMC532使用

    2018年3月份申请了一个院创,要做一个基于NFC技术的考勤设备,想法是用手机的NFC将学号信息传导考勤机,由考勤机统计缺勤信息,因为自己的拖延症,一直拖到现在.现在一边写毕业论文一边准备院创答辩,又 ...

  4. P2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm

    对于一个牛,它存在两种状态:1.处于联通分量 2.不处于联通分量.对于处于联通分量的牛,求出联通分量的大小:对于不处于联通分量的牛,求出其距离联通分量的路程+联通分量大小. 不同的联通分量,染上不同的 ...

  5. python2 线程基础

    1,感谢菜鸟教程, 线程基础:导入,创建函数,创建线和运行 import thread import time # 为线程定义一个函数 def print_time(threadName, delay ...

  6. pysvn 相关

    sudo apt-get install python-svn sudo apt-get install svn-workbench 安装过程中如果缺少相关依赖下载好在执行这两条语句 安装好之后的界面 ...

  7. L2-008 最长对称子串 (25 分) (模拟)

    链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805067704549376 题目: 对给定的字符串,本题要求你输出 ...

  8. NOIP2018Day1T1 铺设道路

    题目描述 春春是一名道路工程师,负责铺设一条长度为 \(n\) 的道路. 铺设道路的主要工作是填平下陷的地表.整段道路可以看作是 \(n\) 块首尾相连的区域,一开始,第 \(i\) 块区域下陷的深度 ...

  9. 使用javaScript操作页面元素

    from selenium import webdriver import time import unittest from selenium.common.exceptions import We ...

  10. struts2-剩余

    一.说明 类型转换.输入验证(前台和后台)(validate().validateXXX().xml) 标签.上传下载.i18n(国际化).ognl(#reqeust.name) 注解方式.log4j ...