96_JavaWeb_Jquery2
【摘要】 jQuery 元素筛选方法eq() 获取给定索引的元素 功能跟 :eq() 一样first() 获取第一个元素 功能跟 :first 一样last() 获取最后一个元素 功能跟 :last 一样filter(exp) 留下匹配的元素is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，truehas(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样not(exp)...
jQuery 元素筛选方法
eq() 获取给定索引的元素 功能跟 :eq() 一样
first() 获取第一个元素 功能跟 :first 一样
last() 获取最后一个元素 功能跟 :last 一样
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true
has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样
not(exp) 删除匹配选择器的元素 功能跟 :not 一样
children(exp) 返回匹配给定选择器的子元素 功能跟 parent>child 一样
find(exp) 返回匹配给定选择器的后代元素 功能跟 ancestor descendant
next() 返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样
nextAll() 返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样
nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
parent() 返回父元素
prev(exp) 返回当前元素的上一个兄弟元素
prevAll() 返回当前元素前面所有的兄弟元素
prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
siblings(exp) 返回所有兄弟元素
add() 把 add 匹配的选择器的元素添加到当前 jquery //(1)eq() 选择索引值为等于 3 的 div 元素
$("#btn1").click(function(){
$("div").eq(3).css("background-color","#bfa"); //:eq() 一样
});
//(2)first()选择第一个 div 元素
$("#btn2").click(function(){
//first() 选取第一个元素
$("div").first().css("background-color","#bfa"); //:first 一样
});
//(3)last()选择最后一个 div 元素
$("#btn3").click(function(){
//last() 选取最后一个元素
$("div").last().css("background-color","#bfa"); //:last 一样
});
//(4)filter()在div中选择索引为偶数的
$("#btn4").click(function(){
//filter() 过滤 传入的是选择器字符串
$("div").filter(":even").css("background-color","#bfa");
});
//(5)is()判断#one是否为:empty或:parent
//is用来检测jq对象是否符合指定的选择器
$("#btn5").click(function(){
alert( $("#one").is(":empty") );
});
//(6)has()选择div中包含.mini的
$("#btn6").click(function(){
//has(selector) 选择器字符串 是否包含selector
$("div").has(".mini").css("background-color","#bfa");
});
//(7)not()选择div中class不为one的
$("#btn7").click(function(){
//not(selector) 选择不是selector的元素
$("div").not('.one').css("background-color","#bfa");
});
//(8)children()在body中选择所有class为one的div子元素
$("#btn8").click(function(){
//children() 选出所有的子元素
$("body").children("div.one").css("background-color","#bfa");
});
//(9)find()在body中选择所有class为mini的div元素
$("#btn9").click(function(){
//find() 选出所有的后代元素
$("body").find("div.mini").css("background-color","#bfa");
});
//(10)next() #one的下一个div
$("#btn10").click(function(){
//next() 选择下一个兄弟元素
$("#one").next("div").css("background-color","#bfa");
});
//(11)nextAll() #one后面所有的span元素
$("#btn11").click(function(){
//nextAll() 选出后面所有的元素
$("#one").nextAll("span").css("background-color","#bfa");
});
//(12)nextUntil() #one和span之间的元素
$("#btn12").click(function(){
//
$("#one").nextUntil("span").css("background-color","#bfa")
});
//(13)parent() .mini的父元素
$("#btn13").click(function(){
$(".mini").parent().css("background-color","#bfa");
});
//(14)prev() #two的上一个div
$("#btn14").click(function(){
//prev()
$("#two").prev("div").css("background-color","#bfa")
});
//(15)prevAll() span前面所有的div
$("#btn15").click(function(){
//prevAll() 选出前面所有的元素
$("span").prevAll("div").css("background-color","#bfa")
});
//(16)prevUntil() span向前直到#one的元素
$("#btn16").click(function(){
//prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止
$("span").prevUntil("#one").css("background-color","#bfa")
});
//(17)siblings() #two的所有兄弟元素
$("#btn17").click(function(){
//siblings() 找到所有的兄弟元素，包括前面的和后面的
$("#two").siblings().css("background-color","#bfa")
});
//(18)add()选择所有的 span 元素和id为two的元素
$("#btn18").click(function(){
// $("span,#two,.mini,#one")
$("span").add("#two").add("#one").css("background-color","#bfa");
});
});jQuery的属性
1 HTML代码/文本/值
html() 它可以设置和获取起始标签和结束标签中的内容。 跟dom属性 innerHTML一样
text() 它可以设置和获取起始标签和结束标签中的文本。 跟dom 属性innerText一样
val() 它可以设置和获取表单项的value属性值。 跟dom属性value一样 <script type="text/javascript">
$(function () {
// 不传参数，是获取，传递参数是设置
alert( $("div").html() );// 获取
$("div").html("<h1>我是div中的标题 1</h1>");// 设置
// 不传参数，是获取，传递参数是设置
alert( $("div").text() ); // 获取
$("div").text("<h1>我是div中的标题 1</h1>"); // 设置
// 不传参数，是获取，传递参数是设置
$("button").click(function () {
// alert($("#username").val());//获取
$("#username").val("超级程序猿");// 设置
});
});
</script> // 批量操作单选
$(":radio").val(["radio2"]); // 传入的是value值, 即选中
// 批量操作筛选框的选中状态
$(":checkbox").val(["checkbox3","checkbox2"]);
// 批量操作多选的下拉框选中状态
$("#multiple").val(["mul2","mul3","mul4"]);
// 操作单选的下拉框选中状态
$("#single").val(["sin2"]);
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
2 属性
attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled等, attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled等//attr
alert( $(":checkbox:first").attr("name") ); // 获取
$(":checkbox:first").attr("value","alex") //赋值 设置两个值，类似key-value，
alert($(":checkbox:first+ input").attr("checked") ) //undefined
alert($(":checkbox:first+ input").prop("checked") ) //false
$(":checkbox:first+ input").prop("checked", true) // 操作选中
$(":checkbox:first+ input").prop("checked", false) // 操作选中
$(":checkbox:first").attr("abc","abcValue"); // 赋一个不纯在的值
alert( $(":checkbox:first").attr("abc") );3 DOM 的增删改
内部插入：
appendTo() a.appendTo(b) 把 a插入到 b子元素末尾，成为最后一个子元素
prependTo() a.prependTo(b) 把 a插到b所有子元素前面，成为第一个子元素
外部插入：
insertAfter() a.insertAfter(b) 得到 ba
insertBefore() a.insertBefore(b) 得到 ab
替换:
replaceWith() a.replaceWith(b) 用b替换掉 a
replaceAll() a.replaceAll(b) 用a替换掉所有b
删除：
remove() a.remove(); 删除 a 标签
empty() a.empty(); 清空 a 标签里的内容 // 内部插入
$("<h1>标题</h1>").appendTo($("div")) //把 a插入到 b子元素末尾，成为最后一个子元素
$("<h1>标题</h1>").prependTo( $("div") ); //把 a插到b所有子元素前面，成为第一个子元素
// 外部插入
$("<h1>标题</h1>").insertAfter("div");
$("<h1>标题</h1>").insertBefore( $("div") );
//替换
$("<h1>标题</h1>").replaceWith("div");
$("div").replaceWith( $("<h1>标题</h1>") );
$("<h1>标题</h1>").replaceAll( "div" );
//删除：
$("div").empty(); // 清空内容
$("div").remove() // 清除标签CSS 样式操作
addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除，没有就添加样式
offset() 获取和设置元素的坐标
<script type="text/javascript">
$(function(){
var $divEle = $('div:first');
$('#btn01').click(function(){
//addClass() - 向被选元素添加一个或多个类
$divEle.addClass('redDiv blueBorder');
});
$('#btn02').click(function(){
//removeClass() - 从被选元素删除一个或多个类
$divEle.removeClass();
});
$('#btn03').click(function(){
//toggleClass() - 对被选元素进行添加/删除类的切换操作
$divEle.toggleClass('redDiv')
});
$('#btn04').click(function(){
//offset() - 返回第一个匹配元素相对于文档的位置。
var pos = $divEle.offset();
console.log(pos);
$divEle.offset({
top:100,
left:50
});
});
})
</script>jQuery 动画
基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示。
以上动画方法都可以添加参数。
1、第一个参数是动画 执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
淡入淡出动画
fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle() 淡入/淡出 切换
jQuery 事件操作
$( function(){} ); 和 window.onload = function(){} 的区别
1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。
2、原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。
他们触发的顺序 & 次数
1、jQuery 页面加载完成之后先执行 ；jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行
2、原生 js 的页面加载完成之后； 原生 js 的页面加载完成之后，只会执行最后一次的赋值函数jQuery 中其他的事件处理方法
click() 它可以绑定单击事件，以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件。
one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
unbind() 跟 bind 方法相反的操作，解除事件的绑定
live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效
事件的冒泡
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递
javaScript 事件对象
事件对象，是封装有触发的事件信息的一个 javascript 对象。
在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event
这个 event 就是 javascript 传递参事件处理函数的事件对象
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）