day 50 jquary 终极版本
jQuary
一、jquary对象和dom对象
jquary找到的标签对象成为-- jquary对象
原生js找到的标签对象成为 -- dom对象
dom对象只能使用dom对象的方法,不能使用jquery对象的方法
jquery对象也是,它不能使用dom对象的方法 dom对象和jquery对象互相转换:
jquery对象转dom对象 -- jquery对象[0] 示例:$('#d1')[0]
dom对象转jquery对象 -- $(dom对象)
二、jquary选择器
1.基本选择器
选择器是使用
jQuery('#d1') -- $('#d1')
#不管找什么标签,用什么选择器,都必须要写$(""),引号里面再写选择器,通过jQuery找到的标签对象就是一个jQuery对象,用原生JS找到的标签对象叫做DOM对象,看我们上面的jQuery对象部分的内容
id选择器 -- $("#id")
标签选择器 -- $("tagName") --> $('div')
class选择器 -- $(".className") -->$('.c1') //里面直接放类值
配合使用 -- $('div.c1') //找到c1 class类的div标签
组合选择器 -- $("#id, .className, tagName")
总结:
选择器可能找到的标签是多个,会放到数组里面,如果想到单独设置,用索引拿出来的是dom对象,通过 $(dom对象) 的方式转换成jquary对象。
2.基本筛选器
<ul>
<li>蔡世楠</li>
<li>尤利阳</li>
<li id="l3">张雷</li>
<li>申凯琦</li>
<li id="l5">程德浩</li>
<li>罗新宇</li>
<li>曾凡星</li>
</ul>
:first -- 示例:$('li:first') # 第一个
:last // 最后一个
:eq(index) // 索引等于index的那个元素 #index表示的是数字
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// --$('li:has(.c1)') 找到后代中含有满足has里面选择器的那个标签
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签
总结:筛选器是对选择器选择多个标签进行筛选,拿到数组中符合筛选的结果
3.属性选择器
[attribute]
[attribute=value] // 属性等于
[attribute!=value] // 属性不等于
// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']"); // 取到checkbox类型的input标签
$("input[type!='text']"); // 取到类型不是text的input标签
4.表单筛选器
找到的是type属性为这个值的input标签中
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
总结:
通过表单的这些属性可以找到属性所在的标签,
弊端:
可能找到多个没用的标签,不能指定某个标签,建议使用 属性选择器
5.表单对象属性筛选器
:enabled #可用的标签
:disabled #不可用的标签
:checked #选中的input标签
:selected #选中的option标签
6.筛选器的方法
下一个:
$('#l3').next(); 找到下一个兄弟标签
$('#l3').nextAll(); 找到下面所有的兄弟标签
$('#l3').nextUntil('#l5');#直到找到id为l5的标签就结束查找,不包含它
上一个
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素(爷爷辈、祖先辈都找到)
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用。
儿子和兄弟元素
$('ul').children();
$('ul').children('#l3'); #找到符合后面这个选择器的儿子标签
$('#l5').siblings();
$('#l5').siblings('#l3'); #找到符合后面这个选择器的兄弟标签
find
$('ul').find('#l3') -- 类似于后代选择器 $('ul #l3')
filter过滤
$('li').filter('#l3'); -- 过滤掉后代中不包含#l3的标签
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素 $('li').not('#l3');
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
三、标签操作
样式操作
1.样式类的操作
addClass();// 添加指定的CSS类名
removeClass();// 移除指定的CSS类名
hasClass();// 判断样式存不存在
toggleClass(); //切换CSS类名,如果有就移除,没有就添加
2.css样式
原生js
标签.style.color = 'red';
jquery
$('.c1').css('background-color','red');
同时设置多个css样式
$('.c1').css({'background-color':'yellow','width':'200px'})
3.位置操作
查看位置
$('.c2').position(); //查看相对位置
{top: 20, left: 20}
$('.c2').offset(); //查看距离窗口左上角的绝对位置
{top: 28, left: 28}
设置位置
$('.c2').offset({'top':'20','left':'40'});
//设置位置的时候不用添加px,
4.jQuery绑定点击事件的写法
原生js绑定点击事件
// $('.c1')[0].onclick = function () {
// this.style.backgroundColor = 'green';
// }
jquery绑定点击事件
$('.c1').click(function () {
$(this).css('background-color','green');
})
//this是dom对象,需要转化为jquary
点击事件和滚动事件的示例代码
<script>
//点击事件来改变标签位置
$('.change-postion').click(function () {
$('.c1').offset({top:200,left:200});
});
//滚动事件,监听滚动距离来显示或者隐藏标签
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() >=200){
$('.s1').removeClass('hide');
}else {
$('.s1').addClass('hide');
}
});
// 回到顶部,scrollTop设置值
$('.s1').click(function () {
$(window).scrollTop(0);
})
</script>
5.尺寸
$('.c1').height(); //content 高度
$('.c1').width(); //content 宽度
$('.c1').innerHeight();//content高度+padding高度
$('.c1').innerWidth(); //content宽度+padding宽度
$('.c1').outerHeight();//content高度+padding高度 + border高度
$('.c1').outerWidth();//content宽度+padding宽度+ border宽度
文本操作
html() //取得第一个匹配元素的html内容,包含标签内容
html(val) //设置所有匹配元素的html内容,识别标签,能够表现出标签的效果
text() // 取得所有匹配元素的内容,只有文本内容,没有标签
text(val) //设置所有匹配元素的内容,不识别标签,将标签作为文本插入进去
示例:
$('.c1').text('<h3>你好,太白</h3>');
$('.c1').html('<h3>你好,太白</h3>');
值操作
获取值
input type='text'的标签-- $('#username').val();
input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();//是不行的,这样选取多个的时候只能取到第一个,需要循环取值才可以拿到
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
单选select --- $('#city').val();
多选select --- $('#author').val(); // ["2", "3"]
设置值
input type='text'的标签 --- $('#username').val('李杰');
input type='radio'标签 --- $('[name="sex"]').val(['3']);
如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
单选select --- $('#city').val('1'); option value='1'
多选select --- $('#author').val(['2','3'])
属性操作
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr(attrName)// 从每一个匹配的元素中删除一个属性
示例:
设置单个属性
$('.c1').attr('xx','oo');
设置多个属性
$('.c1').attr({'age':'18','sex':'alex'});
查看属性
$('.c1').attr('属性名');
$('.c1').attr('xx');
删除属性
$('.c1').removeAttr('xx');
prop -- 针对的是checked\selected\disabled..
查看标签是否有checked属性,也就是是否被选中
attr $(':checked').attr('checked'); //结果有checked --没有 undefined
prop $(':checked').prop('checked'); //结果有true --没有 false
通过设置属性的方式来设置是否选中:
$(':radio').eq(2).prop('checked',true); true和false不能加引号
$(':radio').eq(2).prop('checked',false);
简单总结:
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
#添加字符串照样能识别标签 *****
$('#d1').append('<a href="http://www.jd.com">京东</a>');
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
示例
$('a').prependTo($('div'));
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点,包括文本被全部删除,但是匹配的元素还
$('div').remove(); //包括自己
$('div').empty(); //清空不包括自己
替换
replaceWith()
rep laceAll() //用前面的内容替换 括号中的内容
示例:
var a = document.createElement('a')
a.href = 'http://www.baidu.com';
a.innerText = 'xxx';
$('span').replaceWith(a); //用 a标签 替换 span
$(a).replaceAll('span'); //用 span 替换 a标签
clone()克隆
<button class="btn">屠龙宝刀,点击就送!</button>
$('.btn').click(function () {
// var a = $(this).clone(); //克隆标签
var a = $(this).clone(true); //连带事件一起克隆
$(this).after(a);
})
四、事件
1.事件的绑定方式
- 方式一: $('#d1').click(function () {})
- 方式二: $('#d1').on('click',function () {})
<script src="jquery.js"></script>
<script>
//方式1
// $('#d1').click(function () {
// $(this).css({'background-color':'green'});
// });
//方式2
$('#d1').on('click',function () {
$(this).css({'background-color':'green'});
})
</script>
2.常用事件
- .click() 左键单击事件
- .dblclick() 双击
- .focus(function(){}) -->获取光标触发的事件
- .blur(function(){}) -->获取光标触发的事件
- $('select').change(function () {}) -->域内容发生改变时触发的事件
- .mouseenter()/leave() -->只穿过父级元素 可以用hover合并enter和leave
//获取光标触发的事件
$('[type="text"]').focus(function () {
$('.c1').css({'background-color':'black'});
});
//失去光标(焦点)触发的事件
$('[type="text"]').blur(function () {
$('.c1').css({'background-color':'purple'});
});
//域内容发生改变时触发的事件
$('select').change(function () {
$('.c1').toggleClass('cc');
});
//鼠标悬浮触发的事件
// $('.c1').hover(
// //第一步:鼠标放上去
// function () {
// $(this).css({'background-color':'blue'});
// },
// //第二步,鼠标移走
// function () {
// $(this).css({'background-color':'yellow'});
// }
// )
// 鼠标悬浮 等同于hover事件
// 鼠标进入
// $('.c1').mouseenter(function () {
// $(this).css({'background-color':'blue'});
// });
// 鼠标移出
// $('.c1').mouseout(function () {
// $(this).css({'background-color':'yellow'});
// });
// $('.c2').mouseenter(function () {
// console.log('得港绿了');
// });
// 鼠标悬浮事件
// $('.c2').mouseover(function () {
// console.log('得港绿了');
// });
// mouseover 和 mouseenter的区别是:mouseover事件是如果该标签有子标签,那么移动到该标签或者移动到子标签时会连续触发,mmouseenter事件不管有没有子标签都只触发一次,表示鼠标进入这个对象
//键盘按下触发的事件 e\event事件对象
$(window).keydown(function (e) {
// console.log(e.keyCode); //每个键都有一个keyCode值,通过不同的值来触发不同的事件
if (e.keyCode === 37){
$('.c1').css({'background-color':'red'});
}else if(e.keyCode === 39){
$('.c1').css({'background-color':'green'});
}
else {
$('.c1').css({'background-color':'black'});
}
})
// 键盘抬起触发的事件
$(window).keyup(function (e) {
console.log(e.keyCode);
})
input事件:
input事件:
22期百度:<input type="text" id="search">
<script>
$('#search').on('input',function () {
console.log($(this).val());
})
</script>
### input事件 只能用on 来做点击事件
3.事件冒泡
<script src="jquery.js"></script>
<script>
$('#d1').click(function () {
alert('父级标签');
});
$('#d2').click(function () {
alert('子级标签');
});
</script>
## 点击子级标签,父级标签会重新执行下自己的方法
解决方法:
在子级标签后面添加
return false
或者 e.stopPropagation()
4.事件委托
事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件,将未来添加进来的某些子标签自动绑定上事件。
格式:上层标签对象.on('click','委托人选择器',function(){});
<div id="d1">
<button class="c1">爱的魔力转圈圈</button>
</div>
<script>
#将'button' 选择器选中的标签的点击事件委托给了$('#d1');
$('#d1').on('click','button',function () {
alert('得港被雪飞调教了,大壮很难受!');
var btn = document.createElement('button');
$(btn).text('爱的魔力转圈圈');
$(btn).addClass('c1');
//添加到div标签里面的后面
$('#d1').append(btn);
});
</script>
5.页面载入和window.onload
window.onload = function () {
$('.c1').click(function () {
$(this).css({'background-color':'green'});
})
// 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容
// window.onload 有覆盖现象,会被后面的window.onload给重新赋值
页面载入,$(function (){alert('xx');}) -- $(document).ready(function(){});
$(function () {
$('.c1').click(function () {
$(this).css({'background-color':'green'});
})
});
//等待所有的文档标签加载完之后才会执行
区别:
1.window.onload()函数有覆盖现象,必须等待着图片资源加载完成之后才能调用
2.jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数)
五、高级操作
动画效果
each循环
循环标签对象数组
$('li').each(function(k,v){
console.log(k,v);
});
循环普通数组
var d1 = ['aa','bb','cc'];
$.each(d1,function(k,v){
console.log(k,v);
})
跳出循环 return false; 类似于break
$('li').each(function(k,v){
console.log(k,v.innerText);
if (k === 1){
return false;
}
});
跳出本次循环 return; 类似于continue
$('li').each(function(k,v){
if (k === 1){
return;
}
console.log(k,v.innerText);
});
data
给标签对象添加数据,类似于添加了全局变量
.data(key, value): 设置值
.data(key) 取值
.removeData(key) 删除值
插件(了解)
<script>
jQuery.extend({ //$.extend({})
min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法,min和max作为键,值是一个function
max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
$('div').min(1,2);不能通过标签对象来调用
</script>
<script>
jQuery.fn.extend({ //给任意的jQuery标签对象添加一个方法
check:function(){
return this.each(function(){this.checked =true;});
},
uncheck:function(){
return this.each(function(){this.checked =false;});
}
});
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>
day 50 jquary 终极版本的更多相关文章
- 50 【Go版本变化】
Go的版本介绍:https://golang.org/project/ https://golang.org/doc/go1.4 #Go1.4# 语言层面变化较少,但是编译器而言是有巨大的突破的,体现 ...
- HighCharts终极版本
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- js19--继承终极版本
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- React Native 0.50版本新功能简介
React Native在2017年经历了众多版本的迭代,从接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案.虽然,目前存在着很多的功能和性 ...
- 轻松搭建自己的Linux发行版本
许多人想要搭建自己的Linux发行版本,可能是觉得有趣,也可能是为了学习更多的Linux知识,或者因为他们有很正式的问题要解决.但是秘密是:自己搭建完美的发行版本不是很困难的一件事.事实上,我们收集了 ...
- JF厂V8版本爱彼AP15703,黄家橡树离岸型,超越N厂神器
根据调查的结果JF厂的爱彼AP15703几乎常年垄断了爱彼的市场,销量持续性的排在爱彼整个品牌中的第一位.JF厂这两年一直在攻克爱彼整个品牌,有了解的都知道 爱彼15703以前是N厂的五大复刻神器的代 ...
- apache tomcat (catalina)查版本(solaris/unix)
先进到tomcat的bin目录下(cd /tomcat目录/bin),在执行./version.sh https://blog.csdn.net/vv___/article/details/78653 ...
- MySQL多版本并发控制机制(MVCC)-源码浅析
MySQL多版本并发控制机制(MVCC)-源码浅析 前言 作为一个数据库爱好者,自己动手写过简单的SQL解析器以及存储引擎,但感觉还是不够过瘾.<<事务处理-概念与技术>>诚然 ...
- 阿里正式发布《Java开发手册》终极版!
摘要: 本文讲的是阿里正式发布<Java开发手册>终极版!,别人都说我们是码农,但我们知道,自己是个艺术家.也许我们不过多在意自己的外表和穿着,但我们不羁的外表下,骨子里追求着代码的美.质 ...
随机推荐
- Linux 实现回收站功能脚本
#!/bin/bash function z-trash() { # 判断参数是否为空 if [ ! $1 ] then echo "z-trash error: file name of ...
- java-version不是内部或外部命令的问题
有时java-version的错误并不一定是环境配置的问题 ,可能是粗心的问题 运行——cmd——输入java -version 看清.java命令后是有个空格的 -version应该只是参数而已 我 ...
- PowerBuilder学习笔记之删除和加载PBL文件的方法
删除PBL目录的方法:直接点删除键删除 加载PBL文件的方法:点Browse按钮选择PBL文件
- 解决:error LNK1169: 找到一个或多个多重定义的符号
每一个c++项目中可以包含多个cpp文件和.h文件,不过只能有而且必须有一个cpp文件中包含main函数,否则就会报错.所以在一个c++项目中不能单独运行一个cpp文件,只能运行一个项目.如果你想一个 ...
- Java源码阅读之ArrayList
基于jdk1.8的ArrayList源码分析. 实现List接口最常见的大概就四种,ArrayList, LinkedList, Vector, Stack实现,今天就着重看一下ArrayList的源 ...
- element-ui默认样式修改
来自 :https://blog.csdn.net/wangguoyu1996/article/details/81394707 侵删 我们在使用element-ui的时候经常会遇到需要修改组件默认样 ...
- vue多页面项目搭建(vue-cli 4.0)
1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状 ...
- FreeRTOS 中断配置和临界段
中断屏蔽寄存器 PRIMASK.FAULTMASK和BASEPRI 1.PRIMASK:这是个只有1个位的寄存器.当它置1时, 就关掉所有可屏蔽的异常,只剩下 NMI和硬fault可以响应.它的缺省值 ...
- string 数组转 int 数组
用法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //字符串数组(源数组) string[] sNums = new[] {"1", "2" ...
- javascript_05-操作符
一元运算符 a++和++a //5 2 3 var a =1; var b = ++a + ++a; console.log(b) //4 1 3 var a =1; var b = a++ + ++ ...