JQuery(js辅助开发类库)

实现ajax

 $.ajax({
        //请求方式
        type:'POST',
        //发送请求的地址
        url:'/boot1/123',
        //服务器返回的数据类型
        dataType:'json',
        //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
        success:function(data){

        }
    });

Java Script Query(查询) 首先引入JQuery库

confirm 确认提示框 确认返回true 取消返回false

$是一个函数 window.JQuery = window.$ = JQuery   $为核心函数 
$();传入参数不同功能不同
传入函数表示页面加载完之后执行后 相当于onload
传入HTML字符串时会帮我们创建HTML对象
传入选择器字符串#id name .class 标签 属性值直接获取其对象
传入DOM对象会把DOM对象转化为JQuery对象
$(function(){//表示页面加载完成后执行 相当于onload
    var $butObj = $("#id名")//获取了id对象
    $butObj.click(function(){//绑定单击事件
    alert("JQuery的单击事件");
    })
})

//JQuery对象
是DOM对象的数组+JQuery提供的一系列功能方法
//JQuery对象和DOM对象的区别
两种对象的属性和方法不互通
相互转换   $(DOM对象)   JQuery对象[下标取出]

选择器

//基本选择器
$("多项选择");
$("div,span,p.Class");组合选择器
​
//基本过滤选择器
$("list:first")              查list标签的第一个
$("list:last")               查list标签的第一个
$("input:not(:checked)")     查input 不要选中的
$("list:even") JQ对象里索引值是偶数的所有元素(0是偶数)
$("list:odd") JQ对象里索引值是奇数的所有元素
$("list:eq(index)") JQ对象里索引值的元素
$("list:gt(index)") JQ对象里大于索引值的元素
$("list:lt(index)") JQ对象里小于索引值的元素
$(":header") 匹配所有标题标签
$(":animated") 正在执行动画效果的元素
选择没有执行动画的最后一个
$("div:not(:animated):last")
​
//内容过滤器
$("div:contain(text)")  文本选择器 匹配包含给定文本的元素 
$("div:empty")  匹配所有空子元素的元素
$("div:parent")  匹配非空子元素的元素
$("div:parent")  匹配非空子元素的元素
$("div:parent")  匹配非空子元素的元素
$("div:has(selector)") selector写子标签 匹配包含选择器所匹配的元素的元素
​
//属性匹配器
$("div[attribute]")$("div[id]")查找所有id属性的元素
$("input[name='value']")  匹配name属性值为value的input元素
$("input[name！='value']")  匹配不含有name属性或者值不为value的input元素
$("input[name^='value']")  匹配name属性值中以value开头的input元素
$("input[name*='value']")  匹配name属性值中包含value的input元素
$("input[id][name$='man']")  匹配含有id属性且name值是以man结尾的input元素
​
//表单
$(":text")  获取所有文本框
//表单属性选择器
$("input:checked") 所有被选中的元素
$("input:enabled") 所有可用的元素
$("input:disabled") 所有不可用的元素
​

JQuery方法

//css方法可以设置样式
$("选择器").css("backgrou-color","red")
​
//click 单击事件
$("选择器").click(function(){
    $("id名").css("backgrou-color","red");
})
​
//val方法  value
可以操作表单项的value值 传参赋值不传获取
​
//each遍历方法
$jquery对象.each(function(){
    alert(this);//this取到DOM对象
})
​
//插入方法
(内部插入)
$("<h1>wo<\h1>").appendTo("div")   把标签插入到div最后
$("<h1>wo<\h1>").prependTo("div")   把标签插入到div第一个
(外部插入)
insertAfter()   后
insertBefore()  前
//替换
a.replaceWith(b)    用b替换a
replaceAll()        用a替换所有b
//删除
a.remove()          删除a标签
empty()             清空标签内的内容
​
//trim
去掉字符串前后空格

属性操作

//html()
它可以设置和获取起始标签和结束标签中的内容
相当于DOM中的innerHTML一样
​
//text()
它可以设置和获取起始标签和结束标签中的文本
相当于DOM中的innerText一样 
​
//attr 
可以设置和获取属性值
获取元素打点掉.attr("name")获取name属性的值
获取元素打点掉.attr("name","val")获取name属性的值并设置
​
​
//prop
可以设置和获取属性值
​

JQ动画方法

//动画方法第一个参数都是时间
//参数传入函数 自动调用
show() 显示标签
hide() 隐藏标签
toggle 显示隐藏切换
fadeln 淡入
fadeout 淡出
fadeTo()淡化到什么程度(0-1 0.5半透明)
fadeToggle()淡化切换

jq事件处理方法

click()绑定单击事件(传函数),触发单击事件(不传函数)
mouseover()鼠标移入事件
mouseout()鼠标移出事件
bind()可以给元素一次性绑定一个或多个事件
$("").bind("click mouseover",function(){})
one()跟bind一样 但是one绑定的事件只会触发一次
unbind("click mouseover") 解除事件的绑定
live() 绑定事件 动态绑定 后动态添加的元素也可以

//事件的冒泡
 父元素子元素绑定同一个事件时触发子元素事件会同时触发父元素事件
 阻止事件冒泡只需要在子元素的函数体里加上return false 阻止函数的默认行为
 //获取事件对象
//1.jq
 $("").click(function(event){
     console.log(event)
 })
//2.js
window.onload = function(){
    document.getElementById("").onclick = function(event){
     console.log(event)
    }
}
//作用
绑定多个事件 使其执行不同操作 用event获取事件对象判断其类型
 $("").bind("click,mousevoer",function(event){
     if(event.type == click){
        alert("这是单击事件")
      }else{
        alert("这是移入事件")
      }
 })