JQuery

JQuery

JQuery的核心理念是减少代码量,节省开发时间

优点:

提供了功能强大的函数

解决了浏览器的兼容问题

实现了丰富的UI与插件

对错误脚本知识的纠正

1,DOM对象与JQuery对象的相互转换

//获取id为id的元素,转为JQuery对象,$("#id") = jquery("#id")
var j = $("#id");

jquery对象相当于js中的数组,获取的是一个包装集

//获取dom对象
var j1 = document.getElementById("id");

//dom对象转jquery对象
var j1 = j;
var j2 = $(j1);
//jquery对象转domduixiang 
var j = $("#id")[0];

2,JQuery选择器

基于js选择器,使获取元素更加快捷

id选择器

//获取id为yeye元素的jquery对象
var idSelector = $("#yeye");

类选择器

//获取class为yeye元素的jquery对象
var classSelector = $(".yeye");

元素选择器

//获取标签名为div元素的jquery对象
var divSelector = $("div");

组合选择器

//组合选择器参数可以为多个选择器,选择器中间由,分隔
var groupSeletor = $("#yeye",".yeye","li");

属性选择器

//获取属性为class元素的jquery对象
var attributeSelector = $(["class"]);
//获取属性为class,class值为yeye的元素的jquery对象
var attibuteSelector1 = $(["class=yeye"]);

派生选择器

//获取div元素下所有ul元素的jquery对象(包括ul下的所有子孙元素)
var offspringSelectpr = $("div ul");

子类选择器

//获取div元素下的所有ul元素的jquery对象(不包括ul元素下的所有子孙元素)
var offspringSelectpr = $("div>ul");

相邻弟弟选择器

//获取id为uncle的元素之后的相邻的ul元素的jquery对象(相邻,指定元素二者缺一不可)
var adjoinSelector = $("#uncle+ul");

所有弟弟选择器

//获取id为uncle元素之后的所有与uncle同级的ul元素的jquery对象
var bortherSelect = $("#uncle~ul");

表单选择器

//获取表单内所有input的元素
var fromSelect = $(":input");

过滤选择器

//获取所有被选中状态的元素(单选框,复选框)
var select = $(":checked");
//获取所有下拉框的选中项
var sel = $(":selected option");
//匹配指定下标的元素
var index = $(":checkbox:checked:eq(1)");
//获取指定指定下标之后的所有元素
var index = $(":checkbox:checked:gt(0)");

3,创建元素与添加元素

//创建id为div1,文本内容为这是一个div的div元素:字符串内的元素以及属性可以被识别
$("<div id="div1">这是一个div</div>");

//将div2添加到div1中,如果div内有子元素,则div2在所有子元素的最前
$("#div1").prepend("<div id="div2">这是一个div2</div>");
//如果外部有div3的元素,则剪切至div1元素内部的首位
$("#div1").prepend("#div3");

//将div2添加到div1中,如果div内有子元素,则div2在所有子元素的最后
$("#div1").append("<div id="div4">这是一个div4</div>");
//如果外部有div3的元素,则剪切至div1元素内部的末位
$("#div1").append("#div5");

//添加元素至被元素的上位(平级添加)
$("#div1").before("<div id="div6">这是一个div6</div>");
//添加元素至被元素的下位(平级添加)
$("#div1").after("<div id="div7">这是一个div7</div>");

4,操作元素属性

获取元素属性

//如果没有则添加属性
var att = $("#div1").attr("class");
var att1 = $("#div1").prop("class");

修改元素属性

//attr可以操作自定义属性,如果属性和值不存在,则添加
$("#div1").attr("class","blue");
//prop不可以操作自定义属性,如果属性和值不存在,则添加
$("#div1").prop("class","green");

*attr与prop区别
attr可以操作自定义属性,prop则不可以
attr返回的是躯体的值,如果未设置属性,则返回undefined
prop返回的是true与false
总结:一般操作返回值为boolean类型的则使用prop方法(如:checked,selected,disable),其余则使用attr方法

5,操作元素样式

添加样式

//在div1的class属性值后追加pink值,原来的值不会被覆盖
$("#div1").addClase("pink");

//在元素行内设置css样式
$("#div1").css("color","red")
//以对象形式添加多个,对象属性以键值对存在
$("#div1").css({"font-size":"16px","font-family":"方正兰亭黑"})

移除样式的值

//移除class属性中为pink值(非删除class属性)
$("#div1").removeClass("pink")

6,操作元素内容

添加元素内容

//在div1元素内添加html内容,html方法可以识别标签以及属性
$("#div1").html("<p>添加一个p标签</p>");

//在div1元素内添加text内容,text方法会将所有内容识别为字符串
$("#div1").text("<p>这是一个字符串</p>");

//在div1元素内添加value值
$("#div1").val("add");

获得元素内容

//获取div1元素的html内容
var elementHtml = $("#div1").html();

//获取div1元素的文本内容
var elementCss = $("#div1").text();

//获取div1元素的value值
var elementValue = $("#div1").val();

*html与text操作的是非单元表元素
*val方法操作的是表单内元素

7,遍历元素

$("#div1").each(function(index,element){//index:索引 element:索引对应的dom对象
    this.innerHTML("添加html内容"+index);//this代表遍历出的每个element对象
    $(this).html("添加html内容"+index);//html方法必须由jquery对象使用,后面添加的内容会覆盖前面的内容
});

8,删除元素

//删除元素
$("#div1").remove();

//删除元素内容
$("#div1").empty();

9,事件

预加载事件

//***引入jquery的位置不同会造成不同的结果,所以可以放在页面加载事件内防止错误的发生
$(document).ready(function(){})

//ready()事件:当文档中的dom结构加载完后执行
//onload()事件:当文档中的dom结构与资源全部加载完后执行

bind绑定事件

1. 谁需要绑定事件(获取元素)
2. 绑定什么事件(添加事件)
3. 触发事件后执行什么(函数)

$("#div1").click(function(){...});
                            
$("#div1").bind("click",function(){...});
                                   
//绑定两个事件执行的函数为同一个函数
$("#div1").bind("click focus",function(){...});

//对象形式添加两个点击事件                                         
$("#div1").bind({"click":function(){...},"blur":function(){...}});                       
                                                           
//添加两个点击事件   
$("#div1")."click":function(){...}."blur":function(){...};