jQuery的操作方法

1、 jQuery简介

jQuery是一个快速、简洁的JavaScript代码库，极大地简化了 JavaScript 编程。

jQuery 库包含以下特性：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

2、

选择网页元素是jQuery的主要用法，就是"选一个网页元素，在对其进行一些操作"。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。

选择表达式可以是CSS选择器：

1 $(document)//选择整个文档对象

2 $('#crows')//选择ID为crows的元素

3 $('div.isJojo')//选择class为 isJojo 的div元素

4 $('input[name=greenday]')//选择name属性等于greenday的input元素

也可以是jQuery特有的表达式：

1 $('a:first')//选择网页中第一个a元素

2 $('#myTable:input')//选择表单中的input元素

3 $('div:gt(2)')//选择所有的div元素，除了前三个

4 $('div:animated')//选择当前处于动画状态的div元素   

3、示例

jQuery使用

修改DOM元素的内容

//设置和修改HTML的内容

$('h1').html('你..真的..能带来腥风血雨呢');

document.querySelector("h1").innerHTML = " 你..真的..能带来腥风血雨呢 "

//获取DOM对象上的内容,不传参数就是获取内容

var html = $('h1').html()

console.log(html)

修改DOM元素的属性

//设置和修改dom元素的属性

$('img').attr("src","img/katana.jpg")

//获取dom属性的值

var imgSrc = $("img").attr("src")

console.log(imgSrc)

修改DOM元素的样式

注意：属性是由多个单词组成，那么key要用引号引起来，或者使用驼峰命名法，如下所示

//一次性设置多个样式

$(".abc").css({

background:"skyblue",

color:"#fff",

"border-bottom":"10px solid purple",

borderTop:"10px solid yellow"

})

//一次性只设置1个样式

//$(".abc").css("border","10px solid pink")

插入和删除DOM元素

-------------------------------------

添加和删除classname

$('button').click(function(e){

console.log($('.d1').attr("class"))

if($('.d1').attr("class")=="d1"){

$('.d1').addClass("swiper");//添加类名

}else{

$('.d1').removeClass("swiper");//删除类名

}

//$('.d1').addClass("swiper");

//$('.d1').toggleClass("swiper");//切换类名

})

DOM相关的事件

语法：$('css选择器').事件名称(function(事件对象){})

$(".d1").click(function(e){

console.log("1")

})

$(".d1").click(function(e){

console.log("2")

})

$('body').keypress(function(e){

console.log(e)

})