Jqury 初识 -jqury选择元素 、 $()下的常用方法

一.前言：认识jqury

jqury: jQuery是一个兼容多浏览器的javascript库，提供了大量实用方法,简化了js操作。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器

$( function(){ ...   }): 加载完执行

注意：使用jq注意先引入jq库。jq库的版本1（兼容低、高级浏览器） 版本2（兼容高级浏览器）。

选择元素：模拟css选择元素，独有的表达式选择，多种筛选方法

jq写法：方法函数化 链式操作 取值赋值合体

与js可以共存，不可以混用

二、jqury选择元素

1 JQ的$() 、 CSS()方法

jQuery 选择器

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”) 

2.JQ选择元素的风格跟CSS风格特别类似,，选中的一个或一组元素

1 2 3 4 5 6 7

JQ选择元素的风格跟CSS风格特别类似,，选中的一个或一组元素 //document.getElementById('div1').style.background = 'red'; //document.getElementsByTagName('div')[0].style.background = 'red'; //document.getElementsByClassName('box')[0].style.background = 'red'; //JQ选择元素的风格跟CSS风格特别类似 //$('#div1').css('background', 'red'); //$('div').css('background', 'red); //$('.box').css('background', 'red);

2 3 4 5 6

<ul>     <li>1111</li>     <li>1111</li>     <li>1111</li>     <li>1111</li> </ul>

1 2 3 4 5 6 7 8

/* 原生js var aLi = document.getElementsByTagName('li'); for( var i =0 ;i<aLi.lenth;i++){     aLi[i].style... } */ //  JQ省略循环（jq省略原生的循环操作） //$('li').css('background', 'red'); //JQ省略原生当中的循环的操作 jQuery('li').css('background', 'red');

3.$()下的常用方法 1

has() not() filter() next() prev() find() eq() index()  css() attr() val()

parent() parents() paretnsUntil() siblings() children() next() nextAll() nextUntil() prev() prevAll() prevUntil() 

注意：设置样式 - 使用JSON格式

$('li').css(

{'background', 'red',

'font-size':'14px'

 }); 

4.$()下的常用方法2

addClass() removeClass() width() innerWidth() outerWidth() insertBefore() before() insertAfter() after() appendTo() append() prependTo() prepend() remove() on() off() scrollTop()

5.$()下的常用方法3

hover() show() hide() toggle() fadeIn() fadeOut() fadeTo() slideDown() slideUp()

6动画

hover(),hide(),show(),toggle(),fadeIn(),fadeOut(),fadeTo(),slideUp,slideDown,slideToggle(),animate()

7事件

实例： $(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