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

最新推荐文章于 2024-05-05 12:10:52 发布

bairan9926

最新推荐文章于 2024-05-05 12:10:52 发布

阅读量261

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/July-/p/5794900.html

版权

一.前言：认识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

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