广场 › 开发技术 › 带你了解前端基础之jQuery#yyds干货盘点#

浅沫记忆 发表于 2021-12-30 21:41:19

带你了解前端基础之jQuery#yyds干货盘点#

1 jQuery
1.1 什么jQuery
1、jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
2、jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。
3、jQuery的作用:

[*]写更少的代码,做更多的事情: write Less, Do more
[*]将我们页面的JS代码和HTML页面代码进行分离
1.2 JQ的入门
<script>
/* js文档加载完成的事件 */
window.onload = function() {
alert("window.onload   111");
}
/* 文档加载完成的事件 */
jQuery(document).ready(function() {
alert("jQuery(document).ready(function()");
});
/* jQuery 简写成 $ */
$(document).ready(function() {
alert("$(document).ready(function()");
});
/* 最简单的写法 */
$(function() {
alert("$(function(){}");
});
</script>1.3 JQuery中的选择器
1.3.1 JQ中的基本选择器

[*]ID选择器: #ID的名称
[*]类选择器: 以 . 开头.类名
[*]元素选择器: 标签的名称
[*]通配符选择器: *
选择器,选择器: 选择器1, 选择器2
1.3.1.1 基本选择器的案例
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
$("#btn1").click(function() {
$("#two").css("background-color", "palegreen");            
});
//找出mini类的所有元素
$("#btn2").click(function() {
$(".mini").css("background-color","palegreen");               
});
$("#btn3").click(function() {
$("div").css("background-color","palegreen");                  
});
$("#btn4").click(function() {
$("*").css("background-color","palegreen");
});
/*选择器分组*/
//找出mini类 和 span元素
$("#btn5").click(function() {
$(".mini,span").css("background-color","palegreen");
});
});
</script>1.3.2 JQ中的层级选择器

[*]子元素选择器: 选择器1 > 选择器2
[*]后代选择器: 选择器1 儿孙
[*]相邻兄弟选择器: 选择器1 + 选择器2: 找出紧挨着的一个弟弟
找出所有弟弟: 选择器1~选择器2: 找出所有的弟弟
1.3.2.1 层级选择器的案例
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//找出body下面的子div   
$("#btn1").click(function(){
$("body > div").css("background-color","palegreen");                  
});
//找出body下面的所有div
$("#btn2").click(function(){
$("body div").css("background-color","palegreen");                  
});
$("#btn3").click(function(){
$("#one+div").css("background-color","palegreen");                  
});
$("#btn4").click(function(){
$("#two~div").css("background-color","palegreen");                  
});
});
</script>1.3.3 JQ中的基本过滤器
选择器:过滤器   $("div:first")
​   :first 找出第一个元素
​   :last 找出最后一个元素
​   :even 找出偶数索引
​   :odd 找出奇数
​   :gt(index) greater-than大于
​   :lt(index) 小于
​   :eq(index) 等于&lt;script&gt;
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//过滤出所有div中第一个元素
$("#btn1").click(function(){
$("div:first").css("background-color","palegreen");               
});
//过滤出所有div中偶数位的div
$("#btn2").click(function(){
$("div:even").css("background-color","palegreen");                  
});
$("#btn3").click(function(){
$("div:odd").css("background-color","palegreen");                  
});
$("#btn4").click(function(){
$("div:gt(2)").css("background-color","palegreen");               
});
});
&lt;/script&gt;1.3.4 JQ中的属性选择器
选择器[属性名称]选择器[属性名称][属性名称]
选择器[属性名称='属性值'][属性名称='属性值'][属性名称='属性值']<script>
$(function(){
    //找到有name属性的input
    $("#btn1").click(function(){
      $("input").attr("checked",true);
    });
    $("#btn2").click(function(){
      $("input").attr("checked",true);
    });
    $("#btn3").click(function(){
      $("input").attr("checked",true);
    });
});
</script>1.3.5 JQ中的表单过滤器

[*]表单选择器:
:input 找出所有的输入项 : 不单单找出input textarea select
​:text 找出type类型为 text
​:password 找出type类型为 password
常用表单对象属性的过滤器
​:selected
​:checked<script>
//1.文档加载事件   
$(function(){
$(":text").css("background-color","pink");
});
</script>1.4 JQ和JS之间的转换

[*]JQ对象: 只能调用JQ的属性和方法
[*]JS对象: 只能调用JS的属性和方法
function changeJS() {
      var div = document.getElementById("div1");
      //div.innerHTML = "JS成功修改了内容"
      //将JS对象转成JQ对象
      $(div).html("转成JQ对象来修改内容")
}
      
$(function(){
      //给按钮绑定事件
      $("#btn2").click(function() {
                //找到div1
                //$("#div1").html("JQ方式成功修改了内容");
                //将JQ对象转成JS对象来调用
                var div = $("#div1");
                //var jsDiv = $div.get(0);
                var jsDiv = div;
                jsDiv.innerHTML="jq转成JS对象成功";
      });
});1.5 JQ中的动画效果
show(): 显示隐藏的匹配元素
hide(): 隐藏匹配的元素
slideUp(): 用滑动动画隐藏一个匹配元素
slideDown(): 用滑动动画显示一个匹配元素
fadeIn(): 通过淡入的方式显示匹配元素
fadeOut(): 通过淡出的方式隐藏匹配元素
animate(): 自定义动画1.6 JQ常用函数
$(function): 文档加载完成的事件
css(): 修改css样式
prop(): 修改属性/获取属性
html(): 修改innerHTML
attr(): 操作一些自定义的属性
addClass(): 添加一个class样式
removeClass(): 移除
blur: 绑定失去焦点
​focus: 绑定获得焦点事件
​click: 鼠标按键被按下和释放时候
​dblclick: 双击
​change: 元素的值改变—>下拉选择框，复选框和单选按钮
append: 给自己添加子节点
appendTo: 将自己添加到别人家,给自己找一个爹
prepend: 在自己最前面添加子节点
after: 在自己后面添加一个兄弟
empty: 清空所有子节点1.7 JQ的开发步骤
将我们页面的JS代码和HTML页面代码进行分离)

[*]导入JQ相关的文件
[*]文档加载完成事件: $(function): 页面初始化的操作: 绑定事件, 启动页面定时器
[*]确定相关操作的事件
[*]事件触发函数
[*]函数里面再去操作相关的元素
https://blog.51cto.com/u_15302000/4864265

查看完整版本: 带你了解前端基础之jQuery#yyds干货盘点#