jQuery笔记

Posted 2020-08-07

这些是我写jQuery时写的一些代码，大家可以看一下。

Query就是一个javascript的函数库，相当于bootstrap第三方框架。

 

$ == jQuery 相当于用 $代替了jQuery。页面加载完成之后在执行jq代码

jQuery基本写法：$(selector选择器).action()

$(document).ready(function(){

// js代码

document.querySelector(‘div‘).style.color = ‘red‘

})

// 简写写法 一般都是用简写

$(function(){

//执行JS代码

document.querySelector(‘div‘).style.background = ‘blue‘

})

用jQuery获取DOM元素标签

 

标签的基本内容

写的时候要在外面写基本的写法

$(function(){

$(‘标签名或者id和类名‘)，

// 通过类名选择器获取标签

console.log( document.querySelector(‘.p2‘) )

console.log( $(‘.p2‘) )

 

// 通过标签名获取标签

console.log( document.querySelectorAll(‘p‘)[2] )

console.log( $(‘p‘)[2] )

 

// 通过*获取所有标签 *获取所有元素

console.log( $(‘*‘)[10] )

 

// 选择多个匹配的标签

console.log( $(‘#p1,.p2‘) )

 

// 通过层级关系选中标签

console.log( $( ‘ul li a‘ ) )

// 通过层级关系选中直系标签

console.log( $( ‘ul>li>a‘ ) )

 

// 通过层级关系选中紧挨着的标签

console.log( $( ‘a+span‘ ) )

// 通过层级关系选中紧挨着的标签然后给他添加样式

$(‘a+span‘).css(‘color‘,‘red‘)

}）

 

筛选器选取元素

 

标签的基本内容

 

$(function(){

// 改变第一个li标签的样式

$(‘li:first‘).css(‘color‘,‘red‘)

$(‘li:first‘).css({

‘color‘:‘red‘,

‘background‘:‘blue‘

})

// 选取最后一个匹配的元素

$(‘li:last‘).css(‘color‘,‘blue‘)

//:not(selector) 排除法，派出符合selector的所有选择器

$(‘p:not(span:first)‘).css(‘color‘,‘blue‘)

//除下第一个li其余的li标签改变颜色

$(‘li:not(:first)‘).css(‘color‘,‘blue‘)

// :eq(index) 选取的是索引值为index的元素 用索引值

$(‘li:eq(2)‘).css(‘font-size‘,‘24px‘)

// ：gt(index) 选取的是所有大于当前索引值index的标签的元素

$(‘li:gt(2)‘).css(‘font-size‘,‘30px‘)

// :even() 匹配的是所有索引值index为偶数的标签的元素 相当于想用哪一个用他的英文意思相等

$(‘li:even‘).css(‘background‘,‘#000‘)

// :odd() 匹配的是所有索引值index为奇数的标签元素

$(‘li:odd‘).css(‘background‘,‘#eee‘)

// :contains(text) 匹配内容所有包含当前内容的标签都会选中

$("li:contains(‘标签‘)").css(‘color‘,‘yellow‘)

// 属性选择器选择元素

$("li[class]").css(‘color‘,‘yellow‘)

$(‘li[class = li5]‘).css(‘background‘,‘green‘)

 

})

 

获取标签的属性

文本内容

// $(‘#demo‘).attr(‘title‘)

//输出id为demo的标签的style样式的属性

console.log( $(‘#demo‘).attr(‘style‘) )

 

 

// 设置一个属性attr(key,value)

//给p标签添加一个类名为p1

$(‘p‘).attr(‘class‘,‘p1‘)

// 设置多个属性值attr({name:value,name:value})

$(‘p‘).attr({

"style":"background:red",

"title":"标题"

// 移除某个属性 想做什么的英文翻译

$(‘p‘).removeAttr(‘title)

// 增加或者移除类名

// 增加类名不影响之前的类名的存在

//addClass(）增加类名 removeClass（）删除类名

$(‘#demo‘).addClass(‘current moves‘).removeClass(‘current‘)

 

 

// text()只能添加文本内容（添加标签的话就是直接是文本内容而不是标签）：html()可以添加标签的内容（html添加标签就是添加了一个标签）

$(‘#demo‘).html(‘这是新替换的标签内容，我要取代之前的<p>我想被添加进去</p>‘)

// $(‘#demo‘).text(‘这是通过text替换的内容，我和html()方法有什么区别<p>我想被添加进去</p>‘)

})

 

jQuery的遍历方法和hover（）方法

jQuery的索引 : $(‘标签名‘).eq($(this).index())

文本基本结构

 

jQuery的遍历使用.each()

$(function(){

// 相当于原生态的for循环遍历所有li标签

$(‘li‘).each(function(){

//鼠标移动到li时候触发一个函数

$(‘li‘).hover(function(){

//利用索引值this在这里相当于li的索引

$(this).css(‘background‘,‘red‘)

//触发时给触发的li添加一个类名，同级li清除类名

$(this).addClass(‘current‘).siblings().removeClass(‘current‘)

},function(){

//离开时触发的函数

$(this).css(‘background‘,‘blue‘)

})

})

})

 

 

 

jQuery对象： 通过jQuery包装DOM对象后产生的对象，jQuery独有的对象，可使，对象都有属于其自己的的属性和方法，那么方法不可以串用。

// 通过DOM方法获取标签

console.log(document.getElementsByTagName(‘div‘)) //输出的是一个数组

 

// 通过jQuery方法获取标签内容

console.log($(‘div‘)) //Object

console.log($()) //输出的是一个空的 Object

// $()创建的是一个没有标签元素的空的jQuery对象

// $(selector)可以创建jQuery对象

 

// 如果JQ封装的方法没有我们所需要的方法呢。

// 我们需要把jQuery对象转化成DOM对象，然后使用DOM方法

 

 

// jQuery提供了两种方法转化成DOM对象

// 1.$(‘div‘).index[];

// 2.$(‘div‘).get(index)

$(‘div‘).get(0).innerHTML = ‘这是通过JQ对象转换成DOM对象后，使用DOM方法进行改变的内容‘

$(‘div‘)[2].innerHTML = ‘这是通过JQ对象转换成DOM对象后，使用DOM方法进行改变的内容‘

 

// DOM对象转化成jQuery对象

var divs = document.querySelectorAll(‘div‘)[1]

$( divs ).text(‘这是通过DOM对象转化成jQuery对象后，用jQuery的方法进行改变的内容‘)

console.log(this) //DOM对象

console.log($(this)) // JQ对象

 

 

 

// jQuery对象的属性和方法

console.log($(‘div‘).length) //当前jQuery对象中元素的个数

console.log($(‘div‘).context) // 当前的文档

console.log($(‘div‘).selector) // 通过选择器获取到的元素

console.log($(‘div‘).size()) //当前jQ对象中元素的个数

 

 

// 在jQuery中，通过each()遍历对象中所有的元素

$(‘div‘).each(function(){

console.log($(this).text())

})

 

// jQuery对象相当于一个容器或者盒子，内部可放置通过筛选器（选择器）找到的元素等内容

 

jQuery对象可以衍生出新的对象

// parent()获取的是直系父级元素

// parents()获取的是所有父级元素

// 过滤：选中符合条件的元素

 

// .filter()筛选出符合条件的标签

$(‘li‘).filter(":nth-child(2n)").css("color","red")

// .has()包含特定标签

$(‘ul‘).has(‘li‘).css(‘font-size‘,‘20px‘)

// .not()排除一部分标签

$(‘ol>li:odd, ul>li:odd‘).not("ol>li").css(‘color‘,"#eee")

 

console.log($("li"))

console.log( $("ul") )

 

// .offsetParent()如果父级元素中添加位置属性，则改变的是父级元素所在的区域，如果父级元素没有定位，则直接追溯到html根元素

// $("li").offsetParent().css("background-color","red")

console.log($(‘li‘))

console.log( $("li").offsetParent())

// jQuery对象衍生出新的jQuery对象，通过调用某些特定的方法

// 链式调用方法

 

console.log( $("p").offsetParent() )

 

jQuery添加、删除、修改元素的方法

内部插入

// // .append() 在当前的标签的内部最后的位置，添加新的文本和标签 可插入内容也可插入标签

// // append(function(index,html)) index:当前标签的索引值 html：当前标签的内容

// $(‘div‘).append(‘这是添加的文本内容‘)

// $(‘div‘).append(‘<p>这是通过内部插入方法引入的段落标签 </p>‘)

// // .appendTo() 把当前的标签插入到目标标签中

// $(‘p‘).appendTo(‘div‘)

 

// // .prepend()当前标签内部的起始位置添加文本或者标签

// $(‘div‘).prepend(‘这是通过prepend方法差入的内容‘)

// $(‘div‘).prepend(‘<p>这是通过内部插入方法引入的段落标签2 </p>‘)

// // .prependTo() 把当前的标签插入到目标标签的起始位置

// $(‘p‘).prependTo(‘div‘)

 

// // $(‘p‘).append(function(index,html){

// // return index = 5 带有返回值的有参函数

// // })

外部插入

// // 外部插入 插入的元素是同级元素

// // .after（）在当前标签之后添加新的元素

// $(‘p‘).after(‘<span>这是通过after外部插入方法引入的内容</span>‘)

// // .before（）在当前标签之前添加新的元素

// $(‘p‘).before(‘<span>这是通过before外部插入方法引入的内容</span>‘)

 

// // insertAfter()把当前元素插入到目标元素之后

// $(‘div‘).insertAfter(‘section‘)

// // insertBefore()把当前元素插入到目标元素之前

// $(‘main‘).insertBefore(‘section‘)

// // 包裹

// // .wrap() 在当前标签的外面在加一层元素 --增加父级元素

// $(‘main‘).wrap("<div class=‘m1‘> </div>")

// // .unwrap()移除当前元素的父级元素

// $(‘main‘).unwrap()

// // .wrapAll()把所有符合条件的元素摘取出来，放到目标元素中

// $(‘span‘).wrapAll("<div class=‘m5‘> </div>")

// // $(‘span‘).wrap("<div class=‘m3‘> </div>")

// $(‘span‘).wrapInner()

// 替换 选中要被替换的标签，然后替换标签移动到被替换标签的位置，然后替换掉被替换的标签

 

//.replaceWith() A被B替换掉，B移动到A的位置替换掉A

// $(‘p‘).replaceWith($(‘section‘))

 

// .replaceAll() A替换掉B，A移动到B的位置替换掉B

// $(‘p‘).replaceAll($(‘section‘))

// // 复制 clone()

// $(‘section‘).clone().prependTo(‘div‘)

// 删除

// .empty() 删除的是标签里面的元素，而这个标签保留

// $(‘span‘).empty()

// .remove() 整个标签直接删除，remove（）里面可以赋值，则有这个值的标签全部删除, 包括事件和附加的数据

$(‘span‘).remove(‘.nn‘)

// .deatach（）事件和附加的数据保留其余删除

$(‘span‘).detach(‘.nn‘)

jQuery获取标签的位置和尺寸

// 标签内容的宽高

console.log($(‘div‘).width()) //200

console.log($(‘div‘).height()) //200

// 标签内容和内边距之和

console.log($(‘div‘).innerHeight()) //300

console.log($(‘div‘).innerWidth()) //300

// 标签的大小 = 内容 + 内边距 + 边框

console.log($(‘div‘).outerWidth()) // 320

console.log($(‘div‘).outerHeight()) //320

//offset() 当前元素与窗口之间的偏移量(位置)top,left

console.log($(‘div‘).offset())

console.log($(‘section‘).offset())

// position()获取当前元素与最近的设有定位的父级元素之间的偏移量

// 从当前元素的外边距开始算

console.log($(‘section‘).position())

console.log($(‘div‘).position())

 

// .scrollTop()当前标签有滚动条的时候，与滚动条顶端的距离

console.log($(‘div‘).scrollTop())

console.log($(‘section‘).scrollLeft())

jQuery自定义动画

/*jQuery提供了自定义创建动画的方法 $(selector).animate({

name:value 样式名称和值

},timer)*/

// 开始动画

$(‘#start‘).click(function(){

$(‘div‘).animate({

// width:‘500px‘,

// height:‘200px‘,

fontSize:‘20px‘

},6000)

$(‘div‘).animate({

width:‘500px‘

},5000)

$(‘div‘).animate({

height:‘500px‘

},5000)

//.stop() 停止当前正在执行的动画,如果动画没有执行完，可以继续执行

$(‘#stop‘).click(function(){

$(‘div‘).stop()

})

 

// 停止所有动画,如果动画没有执行完，可以继续执行

$(‘#st‘).click(function(){

$(‘div‘).stop(true)

})

// 快速完成当前动画

$(‘#ji‘).click(function(){

$(‘div‘).stop(true,true)

})