Jquery基础

Jquery学习：
1.Jquery概念：全称 javaScript Query.是js的一个框架。本质上仍然是js。

2.JQuery特点：
支持各种主流的浏览器。
使用特别简单
拥有便捷的插件扩展机制和丰富的插件
3.使用Jquery:
引入jquery文件；
1.Jquery的封装原理；
使用闭包实现
2.Jquery的选择器；
基本选择器
id选择器
标签选择器
类选择器
组合选择器
层级选择器
简单选择器:first,last,not,even,odd,eq,gt,it,header
内容选择器:contains,empty,parent,has(selector)
可见性选择器:visible，hidden
属性选择器:attr
子元素选择器:
表单选择器
3.Jquery操作元素的属性；
获取:
对象名.attr(“属性名”) //返回当前属性值
注意此种方式不能获取value属性的实时数据，使用对象名.val()进行获取。 修改
对象名.attr(“属性名”,“属性值”);
4.Jquery操作元素的样式和内容；
获取元素对象内容：
1、获取
对象名.html()//返回当前对象的所有内容，包括HTML标签。
对象名.text()//返回当前对象的文本内容，不包括HTML标签
2、修改
对象名.html(“新的内容”)//新的内容会将原有内容覆盖，HTML标签会被解析执行
对象名.text(“新的内容”)//新的内容会将原有内容覆盖，HTML标签不会被解析
jquery操作元素的样式
1、使用css()
对象名.css(“属性名”)//返回当前属性的样式值
对象名.css(“属性名”,“属性值”)//增加、修改元素的样式
对象名.css({“样式名”:“样式值”,“样式名”:“样式值”……})//使用json传参，提升代码书写效率。 2、使用addClass()
对象名.addClass(“类选则器名”)//追加一个类样式,如果已经有类名，则无法修改；
对象名.removeClass(“类选择器 名”)//删除一个指定的类样式

5.Jquery操作元素的文档结构；
获取元素对象
1、内部插入
append(“内容”)：将指定的内容追加到对象的内部
appendTo(元素对象或者选择器)：将制定的元素对象追加到指定的对象内容
prepend()：将指定的内容追加到对象的内部的前面
prependTo()：将制定的元素对象追加到指定的对象内容前面
2、外部插入
after ：将指定的内容追加到指定的元素后面
before：将指定的内容追加到指定的元素前面
insertAfter:把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore:把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
3、包裹
4、替换：
repaceWith将所有匹配的元素替换成指定的HTML或DOM元素。
5、删除
empty()；删除匹配的元素集合中所有的子节点
6.Jquery中的事件；
元素对象.bind(“事件名”,fn)//动态的给指定的元素对象追加指定的事件及其监听的函数。
注意：
js中的是一次添加，多次添加时覆盖的效果
jQuery是追加的效果，可以实现给一个事件添加不同的监听函数。
元素对象.unBind(“事件名”)//移除指定的元素对象的指定事件
注意：js方式添加的事件不能移除。
元素对象.one(“事件名”,fn)//给指定的元素对象添加一次性事件，事件被触发执行一次即失效。
注意：可以给事件添加多个一次函数，unBind可以用来解绑
页面载入事件
$(document).ready(fn);
页面载入成功后会调用传入的函数对象
注意：
此方式可以给页面载入动态的增加多个函数对象，不会被覆盖。
7.jquery中的动画效果。

注意：
jQuery中选择器获取的是存储了HTML元素对象的数组。
jquery获取的元素对象不能够直接使用js的内容，按照数组的取出方式将对象取出后可以使用js的内容。
jquery对我们提供了多种多样的选择器来选择需要操作的HTML元素对象。

3.function testField(){
var uname=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲uname");//获取元素对…("#uname");//获取元素对象
uname.attr(“type”,“button”);
}

---

用户名:

4.1内容//声明函数
function testHtml(){
var showdiv=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲showdiv"); //获取…("#showdiv");//获取元素对象
//修改元素内容
showdiv.html(showdiv.html()+“今天天气真好，适合抓鬼子”);
}

4.2样式//jQuery操作样式—css()
function testCss(){
var showdiv=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲showdiv");//获取元…("#div01");//获取元素对象
div.css({“border”:“solid 1px”,“width”:“300px”,“height”:“300px”});//操作样式
}
function testAddClass(){
var div=KaTeX parse error: Expected '}', got '#' at position 3: {“#̲divo1”}; div.ad…("#div01");
div.addClass(“dd”);
}
function testRemoveClass(){
var div=$("#div01");
div.removeClass(“dd”); //删除元素样式
}

5.//内部插入
function testAppend(){
var div=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲showdiv");//获取元…("#showdiv");//获取元素对象
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲u1").appendTo(d…("#showdiv");//获取元素对象
div.prepend(“你好，”);//使用prepend()，在div前追加html解析的内容
}
function testAfter(){
Var div=KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲showdiv”); div.…("#showdiv");//获取元素对象
div.before(“今天天气不错，适合学习”);//div外部前方插入html解析的内容
div.insertBefore(“#u1”);//将id=u1的所有对象插入到div外部前面

}
function testEmpty(){$("#showdiv").empty();}

6.//js动态添加事件
function testThing(){
var btn=document.getElementById(“btn2”);//获取元素对象
btn.οnclick=function(){ alert(“我是js方式”); } }//添加事件
//jquery
//测试bind绑定
function testBind(){//给一个事件添加多个监听
$("#btn2").bind(“click”,function(){alert(“我是bind绑定单击事件”)});
$("#btn2").bind(“click”,function(){alert(“我是bind绑定单击事件2w2222”)});
}
//测试unBind解绑
function testUnfBind(){ $("#btn2").unbind(“click”); }
//测试one
function testOne(){ $("#btn3").one(“click”,function(){alert(“我是one”)}); }
//页面载入事件
//js方式
window.οnlοad=function(){ alert(“我是js方式页面加载”); }
window.οnlοad=function(){ alert(“我是js方式页面加载2222”); }
//jquery方式
$(document).ready( function(){ alert(“我是jQuery”); } )
$(document).ready( function(){ alert(“我是jQuery22222”); } )

8.jq表格操作
1、jquery操作checkbox
操作checkbox的选择状态使用prop()方法
prop(“checked”)//返回选择的状态，选择返回true,未选返回false
prop(“checked”,true)//置为选择状态
prop(“checked”,false)//置为未选状态
使用each进行遍历
对象名.each(fn)//在遍历的时候会给每个对象默认执行fn函数
this表示js对象
$(this)表示jQuery对象
parents(“标签名”)//获取指定的上级元素对象
parent()
2、jQuery操作表格
//隔行变色功能
$(function(){
$("#btn1").click(function(){
//获取所有的行对象，匹配所有索引值为奇数的元素，
$(“tr:odd”).css(“background-color”,“orange”);
}) })
//全选
$(function(){
//获取被选中的checkbox对象
$("#btn2").click(function(){
$(“input[type=‘checkbox’]”).prop(“checked”,true);
}) })
//取消全部选择
$(function(){
//获取被选中的checkbox对象
$("#btn3").click(function(){
$(“input[type=‘checkbox’]”).prop(“checked”,false);
}) })
//反选
$(function(){
$("#btn4").click(function(){
$(“input[type=‘checkbox’]”).each(function(){
$(this).prop("checked",!$(this).prop(“checked”));
}); }) })
//选择奇数行
$(function(){
$("#btn5").click(function(){
$(“input[type=‘checkbox’]:odd”).prop(“checked”,true);
}) })
//删除选择的行
$(function(){
$("#btn6").click(function(){
$(":checkbox:checked").each(function(){
$(this).parents(“tr”).remove();
}) }) })
//在最后一行添加新的行