基本介绍
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
添加jQuery 库
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<!--将源码导入,两个版本min版和源码版,一般看源码,用min版,效率更高-->
<script src="js/jQuery-2.2.2-min.js"></script>
$(".p1")的基本原理和代码
案例:封装获取元素的方法;
1、将命名class id name传入为text
2、将传入的text进行拆分 .split("");
3、判断拆分后的数组的长度;【1个,2个继续判断操作个数】
4、截取符号;substr(0,1);从0开始截取、一个;
5、根据符号获取其中的方法是寻找id还是其他;
<body>
<p id="p1">this is p</p>
<p class="p1">this is p</p>
<p class="p2 p3">this is p</p>
<p class="p2">this is p</p>
<script>
function $(text){
//将text文本进行拆分
var chooseArr = text.split(" ");
if(chooseArr.length==1){
//通过传入的符号确定要调用的方法
var ch = chooseArr[0].substr(0,1);
switch(ch){
case "#":return document.getElementById(chooseArr[0].substr(1));
case ".":return document.getElementsByClassName(chooseArr[0].substr(1))
default:return document.getElementsByTagName(chooseArr[0]);
}
}else{
//继续判断传入的元素个数
}
}
console.info($(".p1")) //打印pi调用元素
$(".p1")[0].style.backgroundColor = "red"; //通过选择元素修改器属性;
</script>
</body>
第二步:操作Jquery
$(function(){})特点:
1、直接在加载完了程序之后再执行内部程序
2、得到的选择元素对象object(object包含:用什么选择器,元素的值);
- 而传统的选择器直接得到元素
/*通过jquery方式来实现的元素获取*/
$(document).ready(function(){
var op = $("#p1");
console.info(op);
});
/*简写版:(可以直接获取)
$(function(){
var op = $("#p1");
console.info(op);
});
获取到元素(选择器)
通过class获得元素
<!--body端代码-->
<p id="p1">this is p</p>
<p class="p1">this is p</p>
<div></div>
<input type="text" name="username"/>
<span name="username">this is span</span>
var op2 = $(".p1");
console.info(op2);
通过ID获得元素
<!---->Js端代码
var op1 = $("#p1");
console.info(op1);
通过name获取元素
var oinp = $("[name=username]");
<!---->也可以用input[name-username](可以直接调用CSS方法,限定元素类型为input 其他name一致的被排除在外)
console.info(oinp);
oinp.css("background-color","red");
通过标签名获取元素
var odiv = $("div");
console.info(odiv);
<!---->获得所有为div的元素;
<!---->得到的集合,可以**实现底层自动循环,不用去找数组的个数;**
通过元素获得其子元素(表格和列表中常用)
$("#ul1 li:first-child").css("color","red");
<!---->设置ul1下面的第一个li元素的样式为颜色为红色;在选择元素的时候结合了选择器的方法;
$("#mytable tr:even").css("background-color","red");
$("#mytable tr:odd").css("background-color","pink");
<!----> even为选中偶数项,从0开始;
<!----> odd为选中奇数项,从0开始;
属性的操作
原始操作:
对象.属性; 对象["属性名"] 属性名当做下标
/*var op = document.getElementsByName("test")[0];
/!*对象.属性 op["下标"]*!/
console.info(op.title);
console.info(op["title"]);*/
在JQUERy中得到属性:.attr(属性名,属性值);
var value = $("[name=test]").attr("title");
console.info(value);
<!---->传一个值为获取该属性名的值;
$("[name=test]").attr("title","test1");
传一个KEY value的方式;
传一个参数为参数properties ;
参数key,回调函数 描述:
移除属性
$("[name=test]").removeAttr("title");
<!---->移除该属性!要删除的属性名
动态添加class属性
<!---->attr方法:
$("#span1").attr("class","as");
<!---->addclass()方法;
$("#span1").addClass("as"); //将class设置为空不调用类,
自动循环设置其class属性为index1,2,3,;
/*addClass方法设置class属性,调用方法的时候可以传递一个函数,最后返回一个值*/
$("#ul1 li").addClass(function(){
var res = "index"+$(this).index();
return res;
});
【会存在广泛增删后形成的命名一致的问题吗?】
toggleClass(“as”) 将属性class有as类的删除“as”,没有的增加;
/*toggleClass()*/
$("#ul1 li").toggleClass("as");
得到元素内的某个内容
/*html(),封装了js里面innerHTML属性*/
$("#ul1").html()
<!---->修改htnl内部的所有内容:
$("#ul1".html(“<li>123</li>”))
text()获取到元素内部的文本内容
$("#span1").text()
val获取所有文本框的值和js里面的属性
$("#btn").on("click",function(){ //点击之后触发事件,将文本内容打印;
var value = $("input[name=username]").val();
console.info(value);
})
筛选:避免JS和JQuery的混合使用
获取制定下标的元素
不推荐的写法:$("li")[0] $("li").html()
$("li").eq(-1) 最后一个
$("li").eq(0) 第一个;
$("li").first() 找到第一个
$("li").last() 找到最后一个
hasClass() 判断当前元素是否有制定的class属性;
特点:
- 1、有返回true 没有返回false;
var res = $("li").hasClass("li");
console.info(res);
- 2、获取的集合返回的内容会默认返回第一个内容【.html获得第一个;text默认得到所有的元素;】
- 使用each()实现循环取出内容;
$("li").each(function(){
console.info($(this).html());
});
//筛选出符合指定条件的元素;
<!--filter()从集合中筛选出符合指定条件的元素*/-->
var odiv = $("div").filter(".div");
console.info(odiv);
has() 包含的方法:
<!--找到li中必须包含子元素为span的 li;-->
//$("div").has(".span").css("background-color","red");
find()方法;
<!--找到子类的方法:获取元素内部(子类)符合要求的子类;-->
//链式表达
$("div").find(".span").css("background-color","red");
is();
<!--用来判断是否满足指定条件;-->
受限找到span,看他的父元素是否带有.box属性;
var boo =$(".span").parent().is(".box");
console.info(boo);
boo = $(".box").children().is(".span");
console.info(bo