jQuery学习

jQuery语法和选择器：

 

语法：$(选择符).action()

元素选择器：

选取

元素：$(“p”)

选取所有 class="intro" 的

元素：$(.class=”intro”)   $(“p.intro”)

选取所有 id="demo" 的

元素： $(“p#demo”)

 

属性选择器：

W3School

$(“[herf”])                     选取所有带有 href 属性的元素:

$("[herf=’#’]”)              选取所有带有 href 值等于"#" 的元素:

$("[herf=!’#’]”)            选取所有带有 href 值不等于"#" 的元素:

$("[href$='.jpg']")      选取所有 href 值以".jpg" 结尾的元素:

$(“div#intro.head”)   id="intro"的

元素中的所有 class="head" 的元素

$(“:input”)         所有input元素

$(“:text” )          所有type=”text”的input元素

 

CSS选择器：

$(“p”).css(“background-color”,”red”)               p 元素的背景颜色更改为红色

 

jQuery事件：

文档就绪函数：

$(document).ready(function(){

      ====

})

$("button").click(function(){$("p").hide();});   单击

$(selector).dblclick(function(){   })        双击

$(selector).focus(function(){    })         获得焦点…

 

命名冲突：

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

 

jQuery对HTML元素操作：

获取内容：                                            设置内容

.text() -文本内容                                    .text(“hello”)

.html() -内容（包括 HTML 标记）          .html("Hello world!");

. val() -表单字段的值                              .val(“dog”)

获取属性：.attr()  获取属性值   .attr("href")

设置属性：多个属性{}括起来

$(“#w3s”).attr({

“href” : “http://www.baidu.cn”,

“title” : “百度一下你就知道”

})

添加新html内容：

.append() - 在被选元素的结尾插入内容（追加）

.prepend() - 在被选元素的开头插入内容

.after() - 在被选元素之后插入内容（和前面无关，之后加）

.before() - 在被选元素之前插入内容

示例：

This is a paragraph.
This is another paragraph.

List item 1
List item 2
List item 3

追加文本
追加列表项

删除html元素：

.remove()  删除被选元素

.empty()   清空被选元素

jQuery对CSS元素操作：

.addClass() - 向被选元素添加一个或多个类

.removeClass() - 从被选元素删除一个或多个类

.toggleClass() - 对被选元素进行添加/删除类的切换操作

不完整示例：

$("h1,p").toggleClass("blue");

$("h1,p").addClass("blue");

$("h2").removeClass("blue");


标题1

标题2 

这是一个段落。

这是另一个段落。

.css() - 设置或返回样式属性

$("p").css("background-color","yellow");

$("p").css({"background-color":"yellow","font-size":"200%"});     //逗号隔开，大括号括起来

 

jQuery有很多处理尺寸的重要方法

.width()

.height()

.innerWidth()

.innerHeight()

.outerWidth()

.outerHeight()