jquery框架 ———

jquery框架——————8月22号

- 选择器
- 过滤器：

jquery = javascript + query； js代码编写；写的更少，做的更多；

onload：页面加载函数，整个页面加载到内存中自动调用*js代码；

//一加载就执行window.onload = function() {console.log(111);}

1、导入jquery的js；2、编写js代码；（$代替jquery）

<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>

jquery文档加载函数 $=jquery （同上，可替代，并且比onload先执行）

	$(function(){console.log(222);})

使用on绑定事件，使用off解绑事件；

    $("#btn").on("click",function(){alert("单击");})$("#btn").mouseover(function(){console.log("鼠标悬浮");}) $("#btn2").click(function(){//$("#btn").off("click"); //解绑指定事件$("#btn").off(); //解绑所有事件})

this代表当前对象；hide()：隐藏方法；html()：获取内容；

     $("p").mouseover(function(){$(this).hide(); //隐藏当前对象})$("p").click(function(){alert($(this).html()); //获取当前内容`在这里插入代码片})

遍历：for循环与jq对比；

	//遍历 for循环var li = document.getElementsByTagName("li");for(var i = 0;i < li.length;i++){console.log(li[i].innerHTML);}//jquery 循环 each方法$("ul>li").each(function(i,o){console.log(i); //拿到索引console.log(o.innerHTML); //拿到元素console.log($(o).html()); //jq对象 拿到元素//console.log($(this).html());})

jq添加css样式：

	<style type="text/css">.h{width: 300px;color:mediumvioletred;border: 2px solid;}</style><h1>Hello JQuery</h1>$("h1").mouseover(function(){// $(this).addClass("h"); //添加class$(this).css("color","blue");}).mouseout(function(){// $(this).removeClass("h"); //移除class$(this).css("color","pink");})

jquery对象与dom对象之间的相互转换：

<input type="" name="" id="username" value="请输入用户名" /><script type="text/javascript">$(function() {var username = document.getElementById("username");console.log(username.value);//dom对象转为jquery对象：使用$(dom对象)，$()称为工厂函数console.log($(username).val());//jquery对象转换为dom对象：1、类似数组元素访问方式var $username = $(username);var username2 = $username[0];console.log(username2.value);//2、get(0)方法var username3 = $username.get(0);console.log(username3.value);})</script>

选择器

基本选择器加样式：

  $(".h1").css("background-color","#ccc");$(".h2,#p,.li").css({"color":"orange","border":"1px solid"});$("*").css({"background-color":"pink","border":"1px solid #000"});

层级选择器：
ancestor descendant：空格，获取ancestor下所有的descendant元素；(“form input”);
parent>child：父子选择器；获取子元素；$(“form>input”);
prev + next：相邻兄弟选择器；获取紧随prev元素后的一个兄弟元素；(“label+input”);
prev ~ siblings：通用兄弟选择器；获取prev元素后边的所有兄弟元素；(“form~input”);

过滤器：

基本过滤选择器：
：first 选取第一个元素；$(“tr:first”);
：last 选取最后一个元素；
：not(selector) 去除所有与给定选择器匹配的元素；
：even 选取所有元素中偶数索引的元素，从0开始计数；
：odd 选取所有元素中奇数索引的元素；
：eq(index) 选取指定索引的元素；
：gt(index) 选取索引大于指定index的元素；
：lt(index) 选取索引小于指定index的元素；
：header 选取所有的标题元素；
：animated 匹配所有正在执行动画效果的元素；

内容过滤选择器：
：contains(text) 选取包含text文本内容的元素；$(“div:contains(‘John’)”)；
：empty 选取不包含子元素或者文本节点的空元素；
：has(selector) 选取含有选择器所匹配的元素的元素；(“div:has ( p )”)；
：parent 选取含有子元素或文本节点(内容)的元素；

可见性过滤选择器：
：hidden 选取所有不可见的元素$(“tr:hidden”) 匹配所有display:none、input中type=hidden的元素；
：visible 选取所有可见的元素；

    $("input:eq(1)").click(function(){$(":hidden").show(); //show方法显示})$("input:last").click(function(){$("#di:visible").hide();})

属性过滤选择器：
[attribute] 选取拥有此属性的元素；$(“div[id]”)；
[attribute = value] 选取指定属性值为value的所有元素；
[attribute != value] 选取属性值不为value的所有元素；
[attribute ^= value] 选取属性值以value开始的所有元素；
[attribute $= value] 选取属性值以value结束的所有元素；
[attribute *= value] 选取属性值包含value的所有元素；
[selector1] [selector2] ……[selectorN] 复合性选择器；

子元素过滤选择器：
对某元素中的子元素进行选取
：nth-child(index/even/odd) 选取索引为index的元素、索引为偶数、索引为奇数的元素—index从1开始；
：first-child 此选择符将为每个父元素匹配第一个子元素；
：last-child 次选择符将为每个父元素匹配最后一个子元素；
：only-child 选取唯一子元素，它的父元素只有它这一个子元素；

表单过滤选择器：根据元素类型进行选择

选取表单元素的过滤选择器
：input 选取所有、、和元素；
：text 选取所有的文本框元素；
：password 选取所有的密码框元素；
：radio 选取所有的单选框元素；
：checkbox 选取所有的多选框元素；
：submit 选取所有的提交按钮元素；
：image 选取所有的图像按钮元素；
：reset 选取所有重置按钮元素；
：button 选取所有按钮元素；
：file 选取所有文件上传域元素；
：hidden 选取所有不可见的元素；
注：$(“input[type=‘checkbox’]”)----等于：checkbox