标签：
这些是我写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)
})
jQuery笔记
标签：
原文地址：http://www.cnblogs.com/baipengzhen/p/5849241.html
