临时->jQuery 知识点大纲、dom文档加载顺序、选择器、效果

最新推荐文章于 2020-03-13 11:53:59 发布

星星预言

最新推荐文章于 2020-03-13 11:53:59 发布

阅读量160

点赞数

分类专栏： java 文章标签： jq dom js

java 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery

jQuery

1 - 解析HTML结构。
2 - 加载外部脚本和样式表文件。
3 - 解析并执行脚本代码。
4 - DOM树构建完成。
5 - 加载图片等外部文件。
6 - 页面加载完毕。

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

选择器

基本选择器

设置多个值的时候，用字典存储方法：

$(‘a’).css({‘属性1’:’值1’,’属性2’:’值2’})

// 1.id选择器
$('#id').css('color名称','black属性');
// 2.标签选择器
$('a').css('color','yellow')

// 3.类选择器
$('.class').css('color','red')

// 4.通配符选择器
console.log($('*').html())

层级选择器

选择器	语法	描述
后代选择器	$(‘标签1 p’).css(‘属性’,’值’);	所有标签1包含的元素
子代选择器	$(‘标签1>p’).css(‘属性’,’值’);	标签1包含元素(子代的子代就不算了)
邻居选择器	$(‘标签1+p’).css(‘属性’,’值’);	选择相邻的单个元素
兄弟选择器	$(‘标签1～p’).css(‘属性’,’值’);	选出标签1相同的元素
取第一个元素	$(‘li:first’).css(‘属性’,’值’);
取最后个元素	$(‘li:last’).css(‘属性’,’值’);
指定顺序元素	$(‘li:eq(3)’).css(‘属性’,’值’);

例子

$(function(){
            //后代选择器
            $('#box p').css('color','red');
            //子代选择器，子元素的子元素就不算了
            $('#box>p').css('color','yellow');
            //邻居选择器，选择相邻的元素
            $('#father+p').css('background-color','blue')
            //兄弟选择器 
            $('#father~p').css('background-color','burlywood');
            //获取第一个元素
            $('li:first').css('font-size','50px');         
            //获取最后一个元素          
            $('li:last').css('font-size','50px');
            //指定第几个元素
            $('li:eq(3)').css('font-size','50px');
        })

过滤选择器

选择器	语法
选择奇数元素	:odd
选择偶数元素	:even
选择指定索引	:eq(索引)
从指定索引开始	:gt(索引值)
从指定索引之前	:lt(索引值)

例子

//获取第一个：first  最后一个：last

//奇数
$('li:odd').css('color','bisque')
//偶数
$('li:even').css('color','bisque')
//指定索引值的【最常用！！！】
$('li:eq(索引)').css('color','bisque')
//索引值从某个开始的
$('li:gt(索引值)').css('color','bisque')
//索引值之前的
$('li:lt(索引值)').css('color','bisque')

属性选择器

//标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red');

//匹配给定的属性是what值得元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('font-size','50px');

//匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','gray');
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','greenyellow');

//匹配给定的属性是以包含某些值的元素
$('button[class*=btn]').css('background','red')

筛选选择器【常用】！！

//获取第n个元素 数值从0开始
$('span').eq(1).css('color','red');
//查找自己的父元素
$('span').parent().css('color','red');
//.()选择所有的兄弟元素(自己同级的同类型元素)
$('.list').('li').css('color','red')
//.find()
//查找后代元素
$('div').find('span').css('color','red')

JQ与 DOM模型的相互转化

Col1	获取	转换
dom==>jquery对象	var oDiv = document.getElementById(‘box’);	$(oDiv)
jquery对象==>dom	$(‘button’)	(‘button’)[0]
jquery对象==>dom	$(‘button’)	(‘button’).get(0)

//dom==>jquery对象

var oDiv = document.getElementById('box');
console.log($(oDiv));

$(oDiv).click(function(){
   //点击命令 
})

//第一种方式 jquery ===>DOM对象
console.log($('button')[0]);

//第二种方式
console.log($('button').get(0));
var isShow = true;

$('button').get(0).onclick = function(){

JQ效果

元素显示隐藏的方法特效

简单版

show(speed,callback)
后面可以带参数(延时时间，fun())

语法	意义	注意
show	显示	field3
hide	隐藏	field3
toggel	自动开关（已显示就关闭，反之）	foggel(延时时间,function(){方法})

//概念:显示隐藏的匹配元素 语法：show(speed,callback) 参数：
//speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）
//callback:在动画完成时执行的函数，每个元素执行一次

$('#btn').click(function(){
    $('#box').toggle(1000,function(){
        alert('改变')
    });
})

slide-滑动隐藏

通常用在，导航栏鼠标移动上，自动拉出信息框等等
通过高度变化，滑动出设置的元素

语法	意义
slideDown	向下滑动出显示出来
slideUp	向上滑动显示出来
slideToggle	自动滑动，同显示隐藏的toggle

fade-透明度渐变

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

mouseover 与 mouseout 是鼠标移上与移出可以配合使用

语法	意义
fadeIn	淡入效果
fadeOut	淡出效果
fadeTo	调整到指定的不透明度例：fadeTo(时间,0.3透明度)
fadeToggle	自动淡入和淡出效果同上

animate 动画

移动某些元素到指定位置！或改变大小、属性等

语法	意义
animate	创建自定义动画的函数
stop	暂停正在运行的动画
delay	延时操作 delay(1000)延时1秒操作

//以动画形式改变 原来的大小
$('#box').animate({
width:'200px',
height:'300px'
})

//将盒子先左移动100px再等2秒后顶部移动400px
$('#box').animate({left:'100px'}).delay(2000).animate({top:"400px"});

//将盒子移动到100px，300px的位置
$('#box').animate({left:'100px',top:'300px'},2000);

JQ属性

属性总类

jq属性操作分为四部分：html属性操作、dom属性操作、类样式操作、值操作

操作类型	原理	例如
html属性操作	对html中属性进行读取、设置、移除	attr()、removeAttr()
dom属性操作	对DOM元素的属性读取、设置、移除	prop()、removeProp()
类样式操作	对DOM属性className添加，移除	ddClass()、removeClass()、toggleClass()
值操作	对DOM属性value读取和设置	html()、text()、val()

attr( )与prop( )区别

前者对htm操作（可以直观的看到效果），后者对DOM对象操作（可以通过打印来查看效果

HTML属性操作

attr( ) 获取、赋值

设置属性值或者返回被选元素的属性值

//获取值
//  如果有一个参数，表示获取值 对应属性的值
var id = $('选择器').attr('id')  //获取选择器元素指定的 id = 多少

//设置值
$('选择器').attr('class','box')  //设置选择器指定元素的class='box'

$('选择器').attr({name:'hahaha',class:'happy'})  //多个值，用字典

removeAttr( ) 移除

删除一个属性

// 删除值,把name 和 class 都删除，删除多个或单个
$('选择器').removeAttr('name class') // 删多个用空格分割

DOM属性操作

prop( ) 获取、赋值

获取元素集中第一个元素的属性值.它是匹配到的dom对象设置属性。

// 取第一个li元素的class值
$('li').prop('class')
// 设置值
$('li').first().prop({'name':'app','name2':'test'})

removeProp( ) 移除

用来删除由.prop()方法设置的属性集

//删除值
$('li').first().removeProp('name','name2')

类样式操作 (常用！)

addClass( ) 添加类

//添加类
$('span').addClass('span2 span3')

removeClass( ) 移除类

//移除类
$('span').removeClass('span')

toggleClass（）自动添加、删除

//如果存在（不存在）就删除（添加）一个类
toggleClass('box')

值属性操作

text() 取文本

//text()只获取文本
$('选择器').text()
//赋值
$('选择器').text('只是写入文本')

html() 取网页内容

//html()获取所有信息，标签+文本信息
$('选择器').html()
//赋值
$('选择器').html('可以写html标签')

val() 取表单值

表单中获取值，如input textarea select等等

$('选择器').val();
// 设置值
$('选择器').val('设置了表单控件中的值');

input单选框、下拉框、多选框【取值与赋值】

单选框

//获取单选框被选中的value值
// 单选框类型：radio   选中状态：checked
$('input[type=radio]:checked').val()
//设置value  设置选中项
$('input[type=radio]').val(['要选择项的value值'])

复选框

//复选框被选中的value获取到第一个被选中的值
console.log($('input[type=checkbox]:checked').val())
//设置value  设置选中项，复选框可以多选
$('input[type=checkbox]').val(['a','b'])

下拉框

//下拉列表被选中的值
var obj = $('#name option:selected')

//设置下拉列表框的选中值，必须使用select
$('select').val(['3','2'])

文本框

//文本框 设置值 和 获取值
console.log($('input[type=text]').val())

JQ文档操作

插入、剪切标签元素【常用！】

效果	语法
父元素的后面添加标签	父元素.append(子元素)
子元素主动添加进父元素	子元素.appendTo(父元素)
剪切标签到指定位置	`$('粘贴地').append($('选择器，剪切标签'))`
插到选中的第一个位置	$(‘ul’).prepend(‘插到ul下第一个’);
同上，写法不同	$(‘插到ul下第一个’).prependTo(‘ul’);
在..之前插..	$(‘ul’).before(‘插指定标签之前’)
把..插到..前	子.insertBefore(父)
在..之后插..	$(‘ul’).after(‘插指定标签之后’)
把..插到..后	子.insertAfter(父)

//父元素.append(子元素) 追加某元素 父元素中添加新的元素
//添加标签
// 1.把 创造的标签对象直接添加
var oUl = document.createElement('li')
$('ul').append(oUl)
// 2.手动添加内容
$('ul').append('<li><a href="#">luffy</a></li>')
// 剪切添加，将其他位置的标签，添加到制定位置
$('需要添加到的标签').append($('选择器，要剪切的标签'))

//子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素

//prepend 插入到被选中的元素的第一个位置
$('ul').prepend('<li>我是第一个元素</li>');
$('<li>我是第一个元素</li>').prependTo('ul');

//after  before
$('ul').before('<h2>我是一个二级标题</h2>')
$('ul').after('<h3>我是一个三级标题</h3>')

复制

复制内容.clone().粘贴地址
！！参数 true=完全把内部功能也clone false=只克隆表面无功能

$('复制内容').clone(true).insertAfter('粘贴到制定元素之后');

替换

效果	语法
匹配的元素替换成指定	replaceWith()
元素替换掉所有匹配到的元素	replaceAll()

//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">H</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));

//replaceAll
$('<br/><hr/><button>按钮</button>').replaceAll('h4')

删除【常用！】

效果	语法
清空选中，本体框架还在	empty()
彻底删除选中	remove()
移除匹配的节点元素删除节点后事件还在	detach()

//empty() 清空选中的 内容（子元素会被删掉）
$('ul').empty()

//remove() 彻底删掉选中
$('ul').remove()

//detach() 移除匹配的节点元素  删除节点后事件还在
var $btn = $('button').detach()

JQ 通过css获取位置

效果	语法
匹配元素相对父元素的偏移位置	position
取元素在当前视口的相对偏移,返回对象包含两个整型属性：top 和 left	offset
获取元素相对滚动条位置偏移文档被卷起的像素值	scrollTop、scrollLeft
获取第一个匹配元素内部区域高宽（包括补白、不包括边框）	innerHeight、innerWidth
元素外部高宽度（默认包括补白和边框）	outerHeight、outerWeight
取得匹配元素当前计算的高宽度值	weight、height

筛选

常用！！

遍历

//query的遍历方法 .each()

//遍历ul标签下的元素, index=索引  ele=对象
$('ul').children().each(function(index,ele){})

监听事件

常用事件
！！！JQ不支持事件捕获。但支持事件冒泡
这里写图片描述

星星预言

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
临时->jQuery 知识点大纲、dom文档加载顺序、选择器、效果

jQuery 选择器基本选择器层级选择器过滤选择器属性选择器筛选选择器【常用】！！ JQ与 DOM模型的相互转化 JQ效果元素显示隐藏的方法特效简单版 slide-滑动隐藏 fade-透明度渐变 animate 动画 JQ属性属性总类 attr( )与prop( )区别 ...
复制链接

扫一扫