码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-08-22 19:49:32      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

一.前言:认识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()

 

注意:设置样式 - 使用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事件

实例: $(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 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头:$()。

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

标签:

原文地址:http://www.cnblogs.com/July-/p/5794900.html

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