JQuery

2019-11-05  本文已影响0人  我不傻_cyy

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 事件。

上一篇下一篇

猜你喜欢

热点阅读