JQuery

JQuery时一个javaScript的框架,通过JQuery可以非常方便的操作html元素。
JQuery库是一个JavaScript文件,可以通过标签<script>引用。
例如:

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

JQuery语法:
JQuery语法是通过选取HTML元素,并对选取的元素进行某些操作。
基本语法为:$(selector).action()
其中:$定义JQuery,selector查找HTML元素,action()对元素执行操作。
将所有的JQuery函数都放在document ready函数中:目的是防止文档在完全加载(就绪)之前就运行函数,操作可能失败。

$(document).ready(function(){
      //JQuery代码
});

等价于:

$(function(){
      //JQuery代码
});

JQuery选择器:允许对html元素组或单个元素进行操作。
JQuery中的所有选择器都是以$开头的:$()
选择器的类型分为:
1.元素选择器:基于元素名来选择元素
例如:

$('p')  就是选择所有<p>元素

2.#id选择器:通过html元素的id属性来选取元素
例如:

$('#test')  选择id为test的元素
  1. .class选择器:通过指定的class选取元素
    例如:
$('.test') 选择类名为test的元素

$("*"):选择所有元素
$(this):选择当前的html元素
$("p.intro"):选择class为intro的p元素
$("p:first"):选择第一个p元素
$("ul li:first"):选择第一个ul元素的第一个li元素
$("ul li:first-child"):选择每个ul的的第一个li元素
$("[href]"):选择带有href属性的元素
$("a[target='_blank']"):选择所有target属性为"_blank"的a元素
$("a[target!='_blank"):选择所有target属性不为"_blank"的a元素
$(":button"):选择所有type="button"的input元素和button元素
$("tr:even"):选择偶数位置的tr元素
$("tr:odd"):选择技术位置的tr元素

JQuery事件:
常用的JQuery事件方法:
$(document).ready():文档完全加载完后执行read()
click():鼠标点击元素时
dbclick():双击元素时
mouseenter():当鼠标穿过元素时
mouseleave():当鼠标离开元素时
mousedown():当鼠标指针移动到元素上方,并按下鼠标按键时
mouseup():当在元素上松开鼠标按钮时
hover():用于模拟光标悬停事件,当鼠标移动到元素上时,会触发指定的第一个函数,当鼠标移出元素时会触发指定的第二个函数。
focus():当元素获得焦点时,会发生focus事件。当通过鼠标点击选中元素或者 tab 键定位到元素时,该元素就会获得焦点。
blur():当元素失去焦点时,发生 blur 事件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,893评论 0 44
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 5,632评论 0 11
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 4,763评论 0 8
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 4,633评论 0 9
  • 经历了这么多年的自然科学的学习,唯物主义的熏陶,坦白讲,自己仍不能称为科学的信徒,哪怕自己如今是专职搞科研的人。 ...
    竹下草阅读 3,954评论 0 0

友情链接更多精彩内容