jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
一丶什么是JQuery
JQuery:
JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率
js库是包含了把复杂的功能封装到简单的方法中
JQuery的两大特性:
链式编程:可以.的形式实现多个功能
隐式迭代:在方法的内部进行遍历循环,而不是我们自己再进行循环,简化操作,方便调用
更好的兼容性:JQuery自动做了浏览器的兼容问题
JQuery的引入:
压缩(XXX.min.js)与未压缩
// 1. 压缩过的文件更小,不占据空间,利于网络传输,可读性不高
// 2. 未压缩的文件占据空间,不利于网络传输,可读性高
引入:导入文件一定要在自定义script标签之上
<!-- 导入文件一定要在自定义script标签之上 -->
<!-- 引入Jq文件 -->
<script src="jquery3.4.1.min.js"></script>
<script>
// 自定义JQ/js代码
</script>
//在控制台输入jQuery
//结果如下,则表示引入JQ成功
ƒ (e,t){return new k.fn.init(e,t)}
相比较下,Js原生的效率要高于JQuery的效率,有时候需要写大量的原生js代码,提高执行效率.
二丶JQuery的入口函数和$符
入口函数:
/* 文档加载完毕 */
//方式一:
$(document).ready(function(){
//文档加载完毕
alert('加载完毕');
});
//方式二:
$(function(){
//文档加载完毕
alert('加载完毕');
});
//方式三:
$(window).ready(function(){
//文档加载完毕
alert('加载完毕');
});
JQ入口函数和js入口函数对比
/* 区别一:书写方式不一样 */
//js的入口函数只能书写一次,多次会存在 事件 覆盖现象
//jq的入口函数可以出现多次,不限次数
/* 区别二:执行时机不同 */
//js的入口函数是在所有的文件资源加载完毕之后,才执行.资源包括:页面文档,外部的js文件,外部的css文件,图片等. (dom树资源加载完毕+文件资源加载完毕)
//JQuery的入口函数,是在文档加载完成后就执行.即Dom树加载完成之后就可以操作dom.不要等到外部所有的资源都加载完毕. (dom树资源加载完毕)
/* 相同: */
//文档的加载顺序:从上到下下,边解析边执行
JQuery的$
$和jQUery具有一样的意义,是jQUery占用了这两个变量
//jQUery+() : 实例化一个JQ对象
jQuery('#id')
k.fn.init {}
//$+() : 实例化一个JQ对象
$('#id')
k.fn.init {}
//判断$符和jQuery的值和类型是否相同
$===jQuery
true
//总结: jQuery和$符就是一个变量,存放类地址
三丶JQuery和JS的Dom对象对比
区别:
jQuery获取元素的jq对象,包括dom树,还有一些方法
原生js只获取dom对象
/* js获取对象 */
// id选择器,类选择器,标签选择器
document.getElementById('app')
// 直接获得一个标签对象
<div id="app">
/* jQuery获取jq对象 */
// id选择器,类选择器,标签选择器
$('#app')
// 获取一个jq对象,包括一些方法
Object [ div#app ] <prototype>:Object { jquery: "3.4.1", constructor: k(), length: 0, … }
相互转换:
/* jQuery对象 转换成 js对象 */
//方式一: jQuery对象[index]; index为索引,推荐此方式
var obj=$('#sel');
jQuery[0]; //js对象
//方式二: jQuery对象.get(index);
var obj=$('#sel');
obj.get(0); //js对象
/* js对象 转换成 jQuery对象 */
//方式一 : $(js对象)
var p_obj=document.getElementById('p1');
$(p_obj); //JQ对象
//方式二 : jquery(js对象)
var p_obj=document.getElementById('p1');
jquery(p_obj); //JQ对象
四丶JQuery的选择器
基本选择器:
<body>
<div>
<input type='text' id='inp' class='inp-class' />
</div>
</body>
/* id选择器 */
//语法 : $('#id');
var id=$('#inp');//得到一个对象
/* 标签选择器 :tagName代表标签名*/
//语法 :$('tagName')
var inp_tag_attr=$('input');//得到一个数组
/* 类选择器 : className */
//语法 :$('.className')
var inp_cls_attr=$('.inp-class');//得到一个数组
/* 通配符选择器 */
//语法 :$('*')
var all_attr=$('*');
/* 交集选择器 */
//语法 :$('div.inp-class')
var attr1=$('div.inp-class'); //得到一个数组
/* 并集选择器 */
//语法 :$('#inp.inp-class')
var el=$('#inp.inp-class');
示例代码:👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
float: left;
}
</style>
</head>
<body>
<div></div>
<div id="box"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
<script type="text/javascript" src="jquery3.4.1.js"></script>
<script type="text/javascript">
//入口函数
$(function(){
//三种方式获取jquery对象
var jqBox1 = $("#box");
var jqBox2 = $(".box");
var jqBox3 = $('div');
//操作标签选择器
jqBox3.css('width', '100');
jqBox3.css('height', 100);
jqBox3.css('background-color', 'red');
jqBox3.css('margin-top', 10);
//操作类选择器(隐式迭代，不用一个一个设置)
jqBox2.css("background", "green");
jqBox2.text('哈哈哈')
//操作id选择器
jqBox1.css("background", "yellow");
})
</script>
</body>
</html>
层级选择器:
/* 后代选择器: 空格 */
// 语法: $('x y');
// 找到 X标签 的所有的后代(子子孙孙) y标签
/* 儿子选择器: 大于号 */
// 语法: $('x > y');
// 找到 x标签 的子标签(儿子,嵌套标签) y标签
/* 毗邻(兄弟)选择器: 加号 ( 必须是相邻的才会被找出来) */
// 语法: $('x + y');
// 找到 x标签下的 紧密相邻的元素 y标签
/* 弟弟选择器: 波浪号 */
// 语法: $('x ~ y');
// 找出 x标签下 所有的弟弟的 y标签
示例代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//获取ul中的li设置为粉色
//后代：儿孙重孙曾孙玄孙....
var jqLi = $("ul li");
jqLi.css("margin", 5);
jqLi.css("background", "pink");
//子代：亲儿子
var jqOtherLi = $("ul>li");
jqOtherLi.css("background", "red");
});
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</ul>
</body>
</html>
属性选择器:
$('[href]'); //找到所有含有href属性的标签
$('tag[href]'); //找到所有tag标签且包含href属性的标签
$('选择器[属性名="abc"]'); //找到所有 选择器且 属性名的值为abc 的标签
$('选择器[属性名$="abc"]'); //找到所有 选择器且 属性名的值为abc结尾 的标签
$('选择器[属性名^="abc"]'); //找到所有 选择器且 属性名的值为abc开头 的标签
$('选择器[属性名*="abc"]'); //找到所有 选择器且 属性名的值含有abc 的标签
$('选择器[属性1][属性名2="abc"]'); //拥有属性1,且属性二的值='xxx',符合前面选择器要求 的标签
示例代码:👇
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<!--<p class="p1">我是一个段落</p>-->
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked" />
<input name="username1111" type='text' value="1" />
<input name="username2222" type='text' value="1" />
<input name="username3333" type='text' value="1" />
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button>
</form>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
//标签名[属性名] 查找所有含有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')
})
</script>
</html>
五丶JQuery的筛选器
基本筛选器:
:firs //第一个
:last //最后一个
:eq(index) //索引等于index的元素
:even //匹配索引为偶数的元素,索引从0开始,返回数组
:odd //匹配索引为奇数的元素,索引从0开始,返回数组
:gt(index) //匹配大于指定索引的元素 ,返回数组
:lt(index) //匹配小于指定索引的元素 ,返回数组
:not(元素选择器) // 不含有 该选择器标签,得到本身标签
:has(元素选择器) // 是否含有 该选择器.得到本身标签
表单筛选器:
/* type筛选器 */
:text
:password
:file
:radio
:checkbox
:submit
:rest
:button
//注意:date特殊,不存在date筛选器
// 用法:
$(':text'); //匹配 input标签type为text的标签
/* 其他属性筛选器 */
:enabled
:disabled
:checked
:selected
// 用法:
$(':enabled'); //匹配 属性值为 enabled标签
// 注意: input标签type为CheckBox也具有 checked属性.
$(':checked')
jQuery.fn.init(4) [input, input, input, option, prevObject: jQuery.fn.init(1)]
六丶JQuery筛选方法
//找所有兄弟
$('选择器').siblings(); //不包含自己,返回一个数组
//进一步筛选: $('选择器').siblings('选择器');
//找弟弟
$('选择器').next(); //找下一个弟弟,返回一个jq对象
$('选择器').nextAll(); // 找所有弟弟,返回一个数组
$('选择器1').nextUntil('选择器2'); //直到找到 选择器2的标签 就结束查找，不包含本身,返回一个数组
//找哥哥
$('选择器').prev(); //找上一个哥哥,返回一个jq对象
$('选择器').prevAll(); // 找所有哥哥,返回一个数组
$('选择器1').prevUntil('选择器2'); //直到找到 选择器2的标签 就结束查找，不包含本身,返回一个数组
//找祖辈
$("选择器").parent(); // 找一个父亲,返回一个jq对象
$("选择器").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）,返回一个数组
$("选择器").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
//找儿子
$("选择器").children(); // 找所有的儿子们
/* 过滤 */
$("div").first() // 获取匹配的第一个元素
$("div").last() // 获取匹配的最后一个元素
$("div").eq(n) // 索引值等于指定值的元素，n是索引
$("div").not() // 从匹配元素的集合中删除与指定表达式匹配的元素
$("div").has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
$("div").find("p"); //后代选择器，在所有div标签中找后代的p标签
$("div").filter(".c1"); // 交集选择器，从结果集中过滤出有c1样式类的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
//获取第n个元素 数值从0开始
$('span').eq(1).css('color','#FF0000');
//获取第一个元素 :first :last 点语法 ：get方法 和set方法
$('span').last().css('color','greenyellow');
$('span').first().css('color','greenyellow');
//查找span标签的父元素（亲的）
$('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
//选择所有的兄弟元素（不包括自己）
$('.list').siblings('li').css('color','red');
//查找所有的后代元素
$('div').find('button').css('background','yellow');
//不写参数代表获取所有子元素。
$('ul').children().css("background", "green");
$('ul').children("li").css("margin-top", 10);
</script>
</html>
