企业的网站建设文章/网站的优化seo
目录
一、jQuery引入
二、jQuery的入口函数
三、jQuery对象和DOM对象
四、jQuery常用的API
1.jQuery基础选择器
2.jQuery的筛选器
五、jQuery样式修改
1.操作样式之css方法
2.设置类样式方法
六、jQuery效果(动画//注意排队问题)
1.//显示和隐藏
2.//滑动
3.淡入淡出
4.自定义动画
5.停止动画
七、设置或获取元素固有的属性
八、jQuery内容文本值
九、jQuery元素操作
1.遍历each()
2.$.each()//遍历数组和对象更方便
十、jquery的注册和解绑和事件处理
1.单个注册
1.1one() //只能触发一次
2.事件处理on//多个注册
2.1on事件委托
2.2on动态绑定
3.解绑事件off
4.自动触发
5.jQuery对象
十一、jQuery拷贝对象，多库共存，jQuery插件
1.$.extend([deep],target,object1)
2.多库共存
3.jQurey插件
一、jQuery引入
https://jquery.com/
二、jQuery的入口函数
//第一种
$(document).ready(function(){
//此处是页面DOM加载完成的入口
})
//第二种
$(function(){
//此处是页面DOM加载完成的入口
})
三、jQuery对象和DOM对象
1．用原生 JS 获取来的对象就是 DOM 对象
2. jQuery 方法获取的元素就是 jQuery 对象。
3.jQuery对象本质是：利用＄对 DOM 对象包装后产生的对象（伪数组形式存储）。
4.DOM 对象与 jQuery 对象之间是可以相互转换的。
因为原生 js 比 jQuery 更大，原生的一些属性和方法 jQuery 没有给我们封装，要想使用这些属性和方法需要把 Query 对象转换为 DOM 对象才能使用。
4.1.DOM对象转换为 jQuery 对象：$(DOM 对象)
4.2.jQuery对象转换为 DOM 对象（两种方式）
$('div')[index] index 是索引号
$('div'). get(index) index 是索引号
四、jQuery常用的API
1.jQuery基础选择器
ID 选择器 $("# id ")
全选选择器 $("*")
类选择器$(".class")
标签选择器$("div")
并集选择器$("div,p,li")
交集选择器$("li.current")
子代选择器$("ul>li")
后代选择器$("ul li")
jQuery的隐式迭代指的是遍历内部DOM元素（伪数组形式存储）的过程
2.jQuery的筛选器
:first $("li:first")第一个li元素
:last $("li:last")最后一个li元素
:eq(index) $("li:eq(index)") 索引号,索引号是从开始的
:odd $("li:odd") 获取索引号为奇数的元素
:even $("li:even") 获取索引号为偶数的元素
parent() $("li").parent 最近的父级
children(selector) $("li").children("li") 亲儿子
find(selector) $("ul").find("li") 后代
siblings(selector) $(".first").siblings("li") 查找兄弟不包括自己
nextAll([expr]) $(".last").nextAll() 查找当前元素之后的所有的同辈元素
prevtAll([expr]) $(".last").prevtAll() 查找当前元素之前的所有的同辈元素
hasClass(class) $('div').hasClass("protected") 判断是否有某个类名
eq(index) $("li").eq(2) 索引
五、jQuery样式修改
1.操作样式之css方法
1.$("this").css("width") //返回属性值
2.$("this").css("width",200) //注意逗号分隔，属性必须加"",如果不是数字可以不用单位和""
3.$("this").css({ //属性名：属性值,驼峰写法
width:400,
height:200,
backgroundColor:"red"
})
2.设置类样式方法
addClass()//添加类
removeClass() //删除类
toggleClass() //切换类
六、jQuery效果(动画//注意排队问题)
1.//显示和隐藏
show()
hide()
toggle()
2.//滑动
slideDown()
slideUp()
slideToggle()
3.淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo(1000,0.5)//速度和透明度要写
4.自定义动画
animate(params,[speed],[easing],[fn])
$("div").animate({
left:300,
top:300,
opacity:.4
})
//params以对象形式传递，必须写
//speed("slow","normal","fast")或动画时长的毫秒数
//easing,默认是"swing",可用参数"linear"
//fn,回调函数，在动画完成时，执行的函数，每个元素执行一次。
5.停止动画
finish(),stop()//注意stop()要写在动画的前面
$("div").hover(function(){
$(this).stop().slideToggle()
})
扩展：hover(function(){},function(){})
$("div").hover(function(){
//经过的事件
},function(){
//离开的事件
})
hover(function(){})
$("div").hover(function(){
$(this).children("ul").slideToggle
})
七、设置或获取元素固有的属性
1.prop("属性名") ||prop("属性","属性值")//设置或获取固有属性
2.attr("index") || attr("index",4)//设置或获取自定义属性
3.数据缓存（data）这个里面的数据存放在元素的内存里面
$("div").data("username","andy")
$("div").data("username")
八、jQuery内容文本值
1.html() || html("123")//获取设置元素内容
2.text() || text("123")//获取设置文本内容
3.val() || val("123")//获取设置表单值
九、jQuery元素操作
1.遍历each()
$("div").each(function(index,domEle){
//index 索引
//domEle DOM对象
console.log(index)
//dom没有css的方法，所以转化为jQuery对象
$(domEle).css("color,"blue")
})
2.$.each()//遍历数组和对象更方便
$.each(arr,function(i,ele){
})
十、jquery的注册和解绑和事件处理
1.单个注册
$("div").click(function(){
$(this).css("backgroundColor","pink")
})
1.1one() //只能触发一次
2.事件处理on//多个注册
$("div").on({
mouseenter:function(){
$(this).css("backgroundColor","pink")
},
mouseleave:function(){
$(this).css("backgroundColor","blue")
}
})
2.1$("div").on("mouseenter mouseleave",function(){
$(this).toggle("current")
})
2.1on事件委托
//click是绑定在ul身上的，但是触发的对象是ul里面的小li
$("ol").on("click","li",function(){
alert(11)
})
2.2on动态绑定
3.解绑事件off
$("div").off()//解除所有绑定事件
$("div").off("click")//解除点击事件
$("div").off("click","li")//解除事件委托
4.自动触发
4.1.$("div").click()//简写
4.2.$("div").trigger("click")
4.3.$("div").triggerHandle("click")//不会触发默认行为
5.jQuery对象
$("div").on('click',function(event){
console.log(event)
event.stopPropagation()
})
event.preventDefault() 或者 return false//阻止默认行为
event.stopPropagation()//阻止冒泡
十一、jQuery拷贝对象，多库共存，jQuery插件
1.$.extend([deep],target,object1)
//target；要拷贝的目标对象，
//object1:待拷贝的第一个对象
//deep:如果为true为深拷贝，默认为false浅拷贝
//浅拷贝，是把被拷贝的对象（重点:复杂数据类型）中的地址拷贝给目标对象，修改对象会影响被拷贝对象，会覆盖
//深拷贝，修改目标对象不会影响被拷贝对象
2.多库共存
2.1.把$改成jQuery
2.2.让用户自己决定
var suibian=$.noConflict();
suibian("span")
3.jQurey插件
// jQuery插件库 http://www.jq22.com/
// jQuery之家（推荐） http://www.htmleaf.com/
创作不易，点个关注呗