标签:
一.前言:认识jqury
jqury: jQuery是一个兼容多浏览器的javascript库,提供了大量实用方法,简化了js操作。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器
$( function(){ ... }): 加载完执行
注意:使用jq注意先引入jq库。jq库的版本1(兼容低、高级浏览器) 版本2(兼容高级浏览器)。
选择元素:模拟css选择元素,独有的表达式选择,多种筛选方法 jq写法:方法函数化 链式操作 取值赋值合体 与js可以共存,不可以混用 |
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
语法 | 描述 | 实例 |
---|---|---|
$("*") | 选取所有元素 | 在线实例 |
$(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> 元素 | 在线实例 |
Js: 元素.getElementsByTagName(“div”); document.getElementById(“divi”); |
jqury选择元素: 模拟css选择元素;和css一样,可以直接操作选中的所有元素 $(“#div1”) 选择一个 $(“.div1i”) 选择一组 $(“#header div”) $(“ul li”) |
1 |
JQ选择元素的风格跟CSS风格特别类似,,选中的一个或一组元素//document.getElementById(‘div1‘).style.background = ‘red‘; |
|
<ul> |
1 |
/* 原生js var aLi = document.getElementsByTagName(‘li‘); // JQ省略循环(jq省略原生的循环操作) //$(‘li‘).css(‘background‘, ‘red‘); //JQ省略原生当中的循环的操作 |
has() not() filter() next() prev() find() eq() index() css() attr() val()
注意:设置样式 - 使用JSON格式
$(‘li‘).css(
{‘background‘, ‘red‘,
‘font-size‘:‘14px‘
});
addClass() removeClass() width() innerWidth() outerWidth() insertBefore() before() insertAfter() after() appendTo() append() prependTo() prepend() remove() on() off() scrollTop()
hover() show() hide() toggle() fadeIn() fadeOut() fadeTo() slideDown() slideUp()
实例: $(window).on(" resize scroll" , function(){ ... });
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。
常见 DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
参考:菜鸟教程 http://www.runoob.com/jquery/jquery-tutorial.html
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
Jqury 初识 -jqury选择元素 、 $()下的常用方法
标签:
原文地址:http://www.cnblogs.com/July-/p/5794900.html