码迷,mamicode.com
首页 > Web开发 > 详细

JQuery学习笔记

时间:2017-04-09 21:01:49      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:脚本语言   开头   reset   input   浏览器   检测   格式   类型   封装   

转载请注明原文地址:

 

一:JQuery能干什么

    jQuery是一个JavaScript函数库。我们知道,JS是运行在浏览器的脚本语言,可以实现页面的动态效果控制。但是原生的JS比较简单,实现复杂功能时所需的代码量也是可观的。由此,就诞生了一系列的JS函数库。其中,jQuery是最流行的JS函数库,其中封装了大量功能复杂且好用的函数,我们直接调用即可。

    jQuery库的功能:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX异步编程
  • 插件机制用来扩展功能(引入某些领域特定的插件工具,如:银行系统的安全检测插件等)

 

二:JQuery的引入

    <head> <script src="jquery-1.10.2.min.js"></script> </head>
 
三:JQuery基本语法
    基础语法: $(selector).action()
    注:与EL/JSTL不同,JQuery是通过 $() 选择对象的,然后通过  .函数名()  调用方法
 

四:JQuery选择器:选取页面元素

    1:基本选择器
    jQuery 选择器可以通过元素的 id、类、类型、属性、属性值等选择HTML 元素。
    1)元素选择器:通过元素名选择:$("name")
    2)#id 选择器:页面中元素的 id 应该是唯一的,所以在页面中选取唯一的元素需要通过 #id 选择器:$("#id")
    3)类选择器:通过指定的 class 查找元素:$(".类名")
 
    2:层级选择器
    可以通过层级关系由大到小地细致选取。
    1)祖先 后代 选择器:前面大选择器,后面为前面选择器结果中更小的元素选择器:$("大元素 小元素")
    2)父子 选择器:$("父元素 > 子元素")
    3)紧邻 选择器:紧跟着第一个选择器后的第二个选择器元素:$("前 + 后")
    4)范围选择器: prev 元素后的所有 target元素:$("prev ~target")
 
    3:筛选器
    1)第一个:$(‘范围元素:first‘)
    2)非:$("范围元素:not(选择器)")
    3)偶数项:$("范围元素:even")
    4)奇数项:$("范围元素:odd")
    5)第i-1项(从0开始):$("范围元素:eq(i)")
    6)大于i-1项:$("范围元素:gt(i)")
    7)最后项:$(‘范围:last‘)
    8)小于i-1项:$("范围:lt(i)")
    9)文档的根:$(":root")
    
    4:内容选择器
    1)包含某内容的元素:$("范围元素:contains(‘内容‘)")
    2)查找空元素:$("范围:empty")
    3)包含某选择器内容的元素:$("范围:has(选择器)")
    4)查找含有子元素的元素:$("范围:parent")
 
    5:属性选择器
    1)查找包含某属性的元素:$("范围[属性]")
    2)查找属性为某值的元素:$("范围[属性=‘值‘]")
    还有:不等于某属性值、属性值以某内容开头、属性值以某内容结尾、多个属性条件组成的选择器等等。
 
    6:表单选择器
    表单选择器格式为:$(":标签名")
    主要有
  • :input
  • :text
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :button
  • :file

    7:表单属性选择器

    常用的有两个:

    1)匹配所有选中的被选中元素(复选框、单选框等):$("input:checked")

    2)匹配所有选中的option元素:$("select option:selected")

JQuery学习笔记

标签:脚本语言   开头   reset   input   浏览器   检测   格式   类型   封装   

原文地址:http://www.cnblogs.com/ygj0930/p/6686299.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!