JQquery框架
基本介绍
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities添加jQuery 库
<head>
<script type="text/javascript" src="jquery.js">script>
head>
<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 pp>
<p class="p1">this is pp>
<p class="p2 p3">this is pp>
<p class="p2">this is pp>
<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获得元素
<p id="p1">this is pp>
<p class="p1">this is pp>
<div>div>
<input type="text" name="username"/>
<span name="username">this is spanspan>
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>123li>”))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());
});//筛选出符合指定条件的元素；
var odiv = $("div").filter(".div");
console.info(odiv);has() 包含的方法：
//$("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