jQuery是为了简化DOM的操作

使用jQuery

1、链接CDN文件

http://code.jquery.com/

<script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
</script>
2、从jQuery官网下载.js文件

https://jquery.com/

基本的jQuery

测试是否成功加载jQuery

$

返回:

function (a,b){return new r.fn.init(a,b)}


$('h1')

返回:

[h1, prevObject: r.fn.init(1)]

0:h1
length:1
prevObject:r.fn.init(1)
proto:Object(0)


$('li')

返回:

(6) [li, li, li, li, li, li#special, prevObject: r.fn.init(1)]


修改h1 文本颜色为红色:

 var x = $('h1');
x.css('color', 'red');
x.css('background','blue')

or

var newCSS = {
'color' : 'white',
'background' : 'green',
'border' : '20px solid red'
}
x.css(newCSS)



eq的使用方法:

// Grabbing multiple returns an array-like object:
var listItems = $('li');

// 更改所有的li 为红色
listItems.css("color",'red');

// 第一个li为蓝色
listItems.eq(0).css('color','blue');

//第二个li为紫色
listItems.eq(1).css('color','purple');

// 倒数第一个li为红色
listItems.eq(-1).css('background','red');

更改文本:

// 获取h1 文本
$('h1').text()

// 修改文本
$('h1').text("Brand New Text!")

// 获取h1的 HTML
$('h1').html()

// 修改 HTML
$('h1').html("<em>Now in Italics</em>")

更改属性和值:

// 更改第二个input为CheckBox
$("input").eq(1).attr('type','checkbox');

// 更改第一个input的值
$("input").eq(0).attr('value',"BRAND NEW VALUE");

// Can do this more directly:
$("input").eq(0).val("cleared up");

修改class

// 添加class
$('h2').addClass("turnRed")

// 删除class
$("h2").removeClass("turnRed");

// 切换class,运行第一次变为蓝色,在运行一次取消蓝色
$("h3").addClass("turnBlue");

$("h3").toggleClass("turnBlue");

jQuery Events

鼠标点击

// On Click 鼠标单击
$('h1').click(function(){
  console.log("There was a click!");
})

// Click on multiple elements
$('li').click(function() {
  console.log("Click on any li !");
})

// Using ‘This’ with jQuery
$('h3').click(function() {
  $(this).text("I was changed!");
})

按压键盘

// Using This with jQuery
$('input').eq(0).keypress(function() {
  $('h3').toggleClass("turnRed");
})

// We can use this event object, that has a ton of information!
$('input').eq(0).keypress(function(event) {
  console.log(event);
})

// Each Keyboard Key has a Keycode, for example Enter is 13
$('input').eq(0).keypress(function(event) {
  if(event.which === 13){
    $('h3').toggleClass("turnRed");
  }
})

ON()

// on() basically works like addEventListener()
//双击
$('h1').on("dblclick",function() {
  $('h1').addClass('turnBlue');
})

//鼠标移动到li上
$('li').on('mouseenter',function() {
  $(this).toggleClass('turnRed');
})

特效和动画:

http://api.jquery.com/category/effects/

$('input').eq(1).val("FADE OUT EVERYTHING");

$('input').eq(1).on("click",function(){
  $(".container").fadeOut(3000) ;
})


$('input').eq(1).on("click",function(){
  $(".container").slideUp(1000) ;
})




发表评论

电子邮件地址不会被公开。 必填项已用*标注