jQuery

jQuery 本质就是一个js的类库 里面封装了用js语言写的方法 类似于 java的jar包

javascript的原生api中
document.getElementById(“id值”);
document.getElementsByClassName(“标签的class属性名字”)
document.getElementsByTagName(“标签的名字”)
document.getElementsByName(“标签name属性的名字”)
封装:
function get(partten){
if(partten以#打头){
return document.getElementById(“id值”);
}else if(partten以.打头){
return document.getElementsByClassName(“标签的class属性名字”)
}

}

jQuery----javascript query
官方
write less do more;
以上就类似于 jQuery 的本质 就是利用选择器来选取对应标签然后进行其它相关操作.
具体使用方法:
1.下载
2.导入页面
3.使用jquery 获取页面元素
基本语法:
$(“选择器”)

原生的DOM对象
就是调用原生的api获取元素 称之为原生dom对象
jquery对象
使用jquery方法 获取的元素 而且是一个经过封装的对象

function get(partten){
var object=new Object();
if(partten以#打头){
var id=partten.substring(1);
var Oridom=document.getElementById(id);
var object[0]=Oridom;
return object;
}else if(partten以.打头){
var Classname=partten.substring(1);
var Oridoms=document.getElementByClassName(Classname);
for(var i=0;i<Oridoms.length;i++){
var object[i]=Oridom[i];
}
return object;
}

}
注意:
在js中 可以给随时赋予任意属性 我想要 对象有一个属性 属性名字叫做0
列如:
user[0]=“我是这个用户0号属性”;
表示 user的属性名为0的属性
需要两种类型对象互相转换
jquery对象–>dom对象
var dom对象=jquery[数字类型的属性名];
dom对象–>jquery对象
var jquery对象= $ (dom对象);
题外话
有可能你在看别人写的代码时候 习惯性 往用jquery获取的元素 前面加$的前缀
我没这个习惯
var $jqueryobj= $ ("#username");

jquery封装的页面加载完成事件
方式一
$(document).ready(function(){
js逻辑
})
方式二
$(function(){
js逻辑
})
注意:页面加载函数不会被覆盖 会从上往下依次执行
事件绑定上:
原生的
方式一
<xxx 事件名=“方法名()”>
方式二:

document.getElementById(“x”).οnclick=function(){
…
}
jquery封装好的:
$(“选择器”).click(function(){
…
})
注意:绑定事件时会省略 on 比如上述代码的鼠标点击事件

jquery封装好的一些效果:
隐藏与显示 就这一个
$(“选择器”).hide(毫秒值);
$(“选择器”).show(毫秒值)
$(“选择器”).toggle(毫秒值)
滑入和滑出:
slideUp(毫秒值)
slideDown(毫秒值)
slideToggle(毫秒值)
淡入和淡出
fadeIn()
fadeOut()
fadeToggle();
这种方法 名字叫做回调函数 你把一个方法作为参数 传给了另外一个方法
回调方法要注意: 传到参数中的方法不一定会执行 它的执行要经过主方法的判断才会执行
比如 鼠标点击事件 只有鼠标点击后 参数内的函数才会执行

学习jquery的选择器:重点
基本选择器 最常用 必须闭着眼写出出来
id选择器 #id
class选择器 .class的名字
标签选择器 标签的名字
所有选择器 *
分组选择器 选择器1,选择器2…
属性选择器 [属性名=‘属性值’]
层级选择器: 记住前面两个
a b :a选择器中的b 孩子们(孙子辈)
a>b :a选择器中的b 儿子们
a+b :a的b的大弟弟 (就是a的子标签b的下一个同级标签)
a~b :a的b的弟弟们(就是a的子标签b 以后的所有同级标签)
过滤选择器: 掌握
特点 :起头
:first
:last
:eq(index)
:lt(index) less than 小于
:gt(index) greate than 大于
:odd 奇数
:even 偶数
了解一下:
内容过滤
父选择器:has(子选择器);
表单选择器:
:text 选中普通文本输入框
:radio 选中的就是单选框
:input 选中所有form的子标签 input textarea select button
css 改变元素的class样式的

attr 改变元素的属性的
<xxx id name title …>

语法格式:
attr(“属性名”)//获取
attr(“属性名”,“属性值”)//设置
css(“属性名”)//获取
css(“属性名”,“属性值”)//设置
addClass 只操作class属性
removeClass 只删除class属性
以后这些有个特点 获取是第一个 设置是全部
注意:万一attr方法 出问题了 就用prop