H5基础知识第十三课时(JQuery)
2017-07-25 19:15
441 查看
JQuery
(1)JQuery优势
可以像CSS一样访问和操作DOM
修改CSS控制页面外观
简化JS代码操作
事件处理更容易
动画效果使用方便
Ajax技术更加完美
大量的基于JQuery的插件
可以自定义拓展功能插件
(2)JQuery语法
格式：$(selector).action()
美元符号$本身是JQuery对象的缩写
选择符selector查询和查找HTML元素
Action执行对元素的操作
示例：
$('p').hide()：隐藏p元素
(3)JQuery文档就绪函数
为了防止文档在完全加载之前运行JQuery代码,可以多次执行， 不会被上一次覆盖
$(document).ready(function()
{
$(selector).action()
})
或者
$(function()
{
$(selector).action()
})
(4)对象转换
原生dom对象(js对象)转换成jQuery对象方法：
$(js对象)
jQuery对象转换成原生dom对象(js对象)：
1. $(jQuery对象)[0]
2. $jQuery对象.get(0)
<scriptsrc="../../js/jquery-3.1.1.min.js"></script>
<script>
vard=document.getElementById('d');
$(d).html('fsdfsdfsdsd');
vare=$("#e");
// e[0].innerText='sdsdsds';
e.get(0).innerText='sdsssdsd';
</script>
(5)解决多库冲突
放弃$符号
jQuery.noConflict() (必须放在第一行)
jQuery(selector).action();
(6)jQuery选择器
类选择器 $(".类名");
ID选择器 $("#ID名");
元素选择器 $("元素名");
后代选择器 $("父代 空格 后代")
子代选择器 $("父代 >子代")
相邻选择器 $("任意元素 +一个有效元素并且紧接着第一个元素")
同级别的元素选择器 $("任意元素 ~ 同级别的元素")
属性选择器：
匹配包含给定属性的元素。 $("元素[属性]")
匹配给定的属性是某个特定值的元素 $("元素[属性='属性值']")
匹配所有不含有指定的属性，或者属性不等于特定值的元素。 $("元素[属性!='属性值']")
匹配给定的属性是以某些值开始的元素 $("元素[属性^='属性值']")
匹配给定的属性是以某些值结尾的元素 $("元素[属性$='属性值']")
匹配给定的属性是以包含某些值的元素 $("元素[属性*='属性值']")
(7)设置元素及内容
html() 获取元素中HTML内容
html(value) 设置元素中HTML内容
text() 获取元素中文本内容
text(value) 设置元素中文本内容
val() 获取表单中的文本内容
val(value) 设置表单中的文本内容
<body>
<divid="d">
<p>adasda</p>
<a>eeeee</a>
<!--把标签当作普通文本进行解析-->
<xmp><p>ffffffff</p></xmp>
<inputtype="text"id="t"value="aaaaaaaa"/>
</div>
</body>
<scriptsrc="../../js/jquery-3.1.1.min.js"></script>
<script>
//获取div标签内部的元素
// alert($("#d").html())
//修改div标签里的内容
// $("#d").html('<span>fff</span> <h1>saa</h1>ddd');
//获取div标签内部的文本
// alert($("#d").text())
//修改div标签里的文本
// $("#d").text('<p>deeeee</p>123434343')
//
//获取输入框的value值
alert($("#t").val());
//修改value属性值
$("#t").val('12345657');
</script>
(8)操作元素属性
attr(key) 获取某个元素key属性的属性值
attr(key,value) 设置某个元素key属性的属性值
attr({key1:value1,key2:value2...}) 设置某个元素多个key属性的属性值
<body>
<inputtype="text"id="t"name="123"value="eafsfs">
</body>
<scriptsrc="../../js/jquery-3.1.1.min.js"></script>
<script>
//获取name属性值
// alert($("input").attr('name'))
//修改name属性值
// $("input").attr('name','321');
// $("input").attr('type','password');
// $("input").attr('id','test');
//修改多个属性值
$("input").attr({'name':'321','type':'password','id':'test'})
</script>
(9)操作CSS
css({name1:value1,name2:value2...}) 设置某个元素行内多个CSS样式
addClass(class) 给某个元素添加CSS类
addClass(class1 class2 class3...) 给某个元素添加多个CSS类
removeClass(class) 删除某个元素的一个CSS雷
removeClasss(class1 class2 class3..) 删除某个元素的多个CSS
toggleClass(class) 来回切换默认样式和指定样式
toggleClass(class1 class2 class3..) 来回切换默认样式和指定样式
toggleClass(class,switch) 来回切换样式的时候设置切换频率
toggleClass(function() {}) 通过匿名函数设置切换的规则
toggleClass(function() {},switch) 通过匿名函数设置切换时的切换频率
toggleClass(functioni,c,s() {},switch) 通过匿名函数设置时传递三个参数
<style>
div{
height:300px;
width:300px;
background-color:orange;
}
.a{
background-color:red;
}
</style>
<body>
<divid="d"></div>
</body>
<scriptsrc="../../js/jquery-3.1.1.min.js"></script>
<script>
$("#d").mouseover(function()
{
// $(this).addClass('a');
//在添加类和删除类来回切换时，推荐使用toggleClass方法
$(this).toggleClass('a');
}).mouseout(function()
{
// $(this).removeClass('a');
$(this).toggleClass('a');
})
</script>
(1)JQuery优势
可以像CSS一样访问和操作DOM
修改CSS控制页面外观
简化JS代码操作
事件处理更容易
动画效果使用方便
Ajax技术更加完美
大量的基于JQuery的插件
可以自定义拓展功能插件
(2)JQuery语法
格式：$(selector).action()
美元符号$本身是JQuery对象的缩写
选择符selector查询和查找HTML元素
Action执行对元素的操作
示例：
$('p').hide()：隐藏p元素
(3)JQuery文档就绪函数
为了防止文档在完全加载之前运行JQuery代码,可以多次执行， 不会被上一次覆盖
$(document).ready(function()
{
$(selector).action()
})
或者
$(function()
{
$(selector).action()
})
(4)对象转换
原生dom对象(js对象)转换成jQuery对象方法：
$(js对象)
jQuery对象转换成原生dom对象(js对象)：
1. $(jQuery对象)[0]
2. $jQuery对象.get(0)
<scriptsrc="../../js/jquery-3.1.1.min.js"></script>
<script>
vard=document.getElementById('d');
$(d).html('fsdfsdfsdsd');
vare=$("#e");
// e[0].innerText='sdsdsds';
e.get(0).innerText='sdsssdsd';
</script>
(5)解决多库冲突
放弃$符号
jQuery.noConflict() (必须放在第一行)
jQuery(selector).action();
(6)jQuery选择器
类选择器 $(".类名");
ID选择器 $("#ID名");
元素选择器 $("元素名");
后代选择器 $("父代 空格 后代")
子代选择器 $("父代 >子代")
相邻选择器 $("任意元素 +一个有效元素并且紧接着第一个元素")
同级别的元素选择器 $("任意元素 ~ 同级别的元素")
属性选择器：
匹配包含给定属性的元素。 $("元素[属性]")
匹配给定的属性是某个特定值的元素 $("元素[属性='属性值']")
匹配所有不含有指定的属性，或者属性不等于特定值的元素。 $("元素[属性!='属性值']")
匹配给定的属性是以某些值开始的元素 $("元素[属性^='属性值']")
匹配给定的属性是以某些值结尾的元素 $("元素[属性$='属性值']")
匹配给定的属性是以包含某些值的元素 $("元素[属性*='属性值']")
(7)设置元素及内容
html() 获取元素中HTML内容
html(value) 设置元素中HTML内容
text() 获取元素中文本内容
text(value) 设置元素中文本内容
val() 获取表单中的文本内容
val(value) 设置表单中的文本内容
<body>
<divid="d">
<p>adasda</p>
<a>eeeee</a>
<!--把标签当作普通文本进行解析-->
<xmp><p>ffffffff</p></xmp>
<inputtype="text"id="t"value="aaaaaaaa"/>
</div>
</body>
<scriptsrc="../../js/jquery-3.1.1.min.js"></script>
<script>
//获取div标签内部的元素
// alert($("#d").html())
//修改div标签里的内容
// $("#d").html('<span>fff</span> <h1>saa</h1>ddd');
//获取div标签内部的文本
// alert($("#d").text())
//修改div标签里的文本
// $("#d").text('<p>deeeee</p>123434343')
//
//获取输入框的value值
alert($("#t").val());
//修改value属性值
$("#t").val('12345657');
</script>
(8)操作元素属性
attr(key) 获取某个元素key属性的属性值
attr(key,value) 设置某个元素key属性的属性值
attr({key1:value1,key2:value2...}) 设置某个元素多个key属性的属性值
<body>
<inputtype="text"id="t"name="123"value="eafsfs">
</body>
<scriptsrc="../../js/jquery-3.1.1.min.js"></script>
<script>
//获取name属性值
// alert($("input").attr('name'))
//修改name属性值
// $("input").attr('name','321');
// $("input").attr('type','password');
// $("input").attr('id','test');
//修改多个属性值
$("input").attr({'name':'321','type':'password','id':'test'})
</script>
(9)操作CSS
css({name1:value1,name2:value2...}) 设置某个元素行内多个CSS样式
addClass(class) 给某个元素添加CSS类
addClass(class1 class2 class3...) 给某个元素添加多个CSS类
removeClass(class) 删除某个元素的一个CSS雷
removeClasss(class1 class2 class3..) 删除某个元素的多个CSS
toggleClass(class) 来回切换默认样式和指定样式
toggleClass(class1 class2 class3..) 来回切换默认样式和指定样式
toggleClass(class,switch) 来回切换样式的时候设置切换频率
toggleClass(function() {}) 通过匿名函数设置切换的规则
toggleClass(function() {},switch) 通过匿名函数设置切换时的切换频率
toggleClass(functioni,c,s() {},switch) 通过匿名函数设置时传递三个参数
<style>
div{
height:300px;
width:300px;
background-color:orange;
}
.a{
background-color:red;
}
</style>
<body>
<divid="d"></div>
</body>
<scriptsrc="../../js/jquery-3.1.1.min.js"></script>
<script>
$("#d").mouseover(function()
{
// $(this).addClass('a');
//在添加类和删除类来回切换时，推荐使用toggleClass方法
$(this).toggleClass('a');
}).mouseout(function()
{
// $(this).removeClass('a');
$(this).toggleClass('a');
})
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- H5基础知识第十四课时(用JQuery确定鼠标位置)
- H5基础知识第十三课时(正则表达式)
- H5基础知识第十四课时(用JQuery实现鼠标悬浮时改变样式)
- H5基础知识第六课时（CSS）1
- H5基础知识第八课时（flex布局）
- H5基础知识第八课时（JS数据类型和输出方法）
- H5基础知识第十课时(Window对象常用的属性)
- H5基础知识第八课时（JS运算符和计算水仙花数）
- H5基础知识第十一课时(JS查看节点)
- H5基础知识第十一课时(JS解决变量自提升问题)
- H5基础知识第七课时（CSS）
- H5基础知识第九课时(JS运算符)
- H5基础知识第十一课时(JS调试快捷键)
- H5基础知识第九课时(JS判断语句)
- H5基础知识第七课时（CSS定位）
- H5基础知识第九课时(JS循环语句)
- H5基础知识第七课时（CSS负边距的使用）
- H5基础知识第十一课时(className属性)
- H5基础知识第十课时(JS函数定义和分类)
- H5基础知识第十二课时(JS添加CSS样式)