1.先说一下JQuery的概念
JQuery最早是由美国一个叫John Resig的人创建的，后来很多JS前辈加入了这个团队。 事实上，JQuery 是 JavaScript 的通用类型。 该例程集成了许多多功能方法。 使用泛型类型，可以用一些简单的代码实现一些复杂的JS效果。
2.JQuery实现代码分离
无需添加：网页中onclick调用函数等干扰，直接引入JQuery泛型和自己编译的JQuery代码即可；
喜欢：
$(函数(){
$("元素").click{function(){
警报（“点击我！”）；
});
上面的代码中，只要定义了Element，元素后面的点击就是一个动作
警报（“点击我！”）； 这是要执行的代码，当然你可以在这个函数中有很多操作；
上面的$符号代表JQuery的意思，就是指泛型。 。 。 我是这么理解的；
3.JQuery的一些核心技能
每个（回调）'就像一个循环
$("元素").length; '元素的数量是一个属性
$("元素").size(); '也是元素个数，不过用括号是有技巧的
$("元素").get(); '页面中元素的集合，存储为字段
$("元素").get(索引); '功能和里面的一样，index表示元素个数，数组的下标
$("元素").get().reverse(); '获取场方向
$("元素1").index($("元素2")); '元素2在元素1中的索引值为。 。 。
4.基本对象获取（注意这里获取的是所有Jquery对象，而不是Dom对象，但是可以转换）
$("*") '的意思是获取所有对象，但到目前为止我还没有这样使用它
$("#XXX") '获取id=XXX的元素对象（id可以是标签的id，也可以是CSS样式的id）常用
$("input[name='username']") 获取input标签中name='userName'的元素对象。 常用
$(".abc") ' 样式类的名称是.abc的公共元素对象
$("div") ' 标签选择器选择所有常用的 div 元素
$("#a,.b,span") '表示获取ID为a的元素和使用类样式b的元素以及所有span元素
$("#a .bp") 'ID号为a，使用b样式的所有p元素
例子：
jquery测试
.checkCSS{
颜色: 蓝色;
.redioCss{
红色;
$(函数(){
// $("#XXX") 获取所有id=XXX的Jquery对象
$("#subt").click(函数(){
// $("XXX") 获取XXX标签名的所有Jquery对象
alert("输入标签的对象个数为："+$("input").length);
// $("XXX[name='YYY']") 获取XXX标签名下所有name='YYY'的Jquery对象
// val() 获取属性值
alert("name='userName'的输入框内容为："+$("input[name='userName']").val());
// 注意第二种获取值的形式
alert("name='note'输入框内容为："+$("input[name='note']").attr("value"));
alert("下拉菜单中所选项目的文本为："+$("#sex option:selected").text());
alert("下拉菜单中所选项目的值为："+$("#sex").val());
alert("选中的复选框数量为："+$("input[name='check']:checked").length);
if($("input[name='check']:checked").length>0){
var allCheckValue="";
var allCheckText="";
$("input[name='check']:checked").each(function(){
allCheckValue+=$(this).val()+" ";
allCheckText+=$(this).parent(".checkCss").text()+" ";
});
alert("复选框选中的文本为："+allCheckText+"，值为："+allCheckValue);
if($("input[name='status']:checked").length>0){
alert("单选按钮的选定文本
对于： "+$("input[name='status']:checked").parent(".redioCss").text()+"
值为："+$("input[name='status']:checked").val());
});
});
姓名：
性别：
男性
女性
既不是男性也不是女性
爱好：旅游
音乐
体育
文学
状态：工作中
辞职
介绍：
5. 获取层次元素
$("Element1 Element2 Element3 ....") '在父级之后是子集之前
$("div > p") '获取div下面所有p元素
$("div + p") 'div元素之前的第一个p元素
$("div ~ p") 'div前面的所有p元素
6. 简单的对象获取
$("Element:first") 'HTML页面中某类型元素的第一个元素
$("Element:last") 'HTML页面中某类型元素的最后一个元素
$("Element:not(selector)") '移除所有与给定选择器匹配的元素，如：$("input:not(:checked)") 表示选择所有未选中的复选框
$("Element:even") '获取素数行
$("Element:odd")' 获取偶数行
$("Element:eq(index)") '获取给定索引值
$("Element:gt(index)") '获取给定索引值的元素之后的所有元素
$("Element:lt(index)") '获取给定索引值的元素之前的所有元素
。 。 。
7. 内容对象获取和对象可见性
$("Element:contains(text)") '元素是否包含text文本内容
$('Element:empty") '获取不包含子元素或文本的元素
$("Element:partnt") '获取包含子元素或文本的元素
$("Element:has(selector)") '是否包含某个元素，如：$("p:has(span)")表示所有p元素都包含span元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素
8.其他对象获取方式
$("Element[id]") '所有具有ID属性的元素
$("Element[attribute = youlika]" '获取所有属性为youlika的元素
$("Element[attribute != youlika]" '获取所有属性不是youlika的元素
$("Element[attribute ^= youlika]" '获取所有属性不是youlika开头的元素
$("Element[attribute $= youlika ]" '获取属性不是以youlika结尾的所有元素
$("Element[attribute *= youlika]" '获取属性包含youlika开头的所有元素
$("Element[selector1][selector2][....]") '符合属性选择器，如$("input[id][name][value=youlika]")表示获取ID，name和value是youlika的输入元素。
9.子元素的获取
$("Element:nth-child(index)") '选择父元素下面的第n个元素
$("Element:nth-child(even)") '选择父元素下面的奇数
$("Element:nth-child(odd)") '选择父元素下方的素数
$("元素:nth-child(3n+1)") '表达式
$("Element:first-child") '选择父元素下的第一个子元素
$("Element:last-child") '选择父元素下的最后一个子元素
$("Element:only-child") '匹配parent下唯一的子元素jquery 对象的属性，例如dt是dl列表中唯一的，那么dt就会被选中
10.表单对象获取
$(:input)//查找所有Input元素，当然包括下拉列表、文本字段、单选框、复选框等。
$(:text)//匹配所有单行文本框
$(:password)//匹配所有密码框
$(:radio)//匹配所有单选按钮
$(:checkbox)//匹配所有复选框
$(:submit)//匹配所有提交按钮
$(:image)//匹配所有图像字段，例如
$(:reset)//匹配所有重置按钮
$(:button)//匹配所有按钮
$(:file)//匹配所有文件上传字段
$(:hidden)//匹配所有不可见元素或者类型为hidden的元素
$(:enabled)//匹配所有可用的输入元素jquery 对象的属性，如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有不可用的输入元素，效果与上面相反
$(:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有下拉列表
11. 设置和删除元素属性
$("Element").attr(name) '获取第一个匹配的属性值，如$("img").attr("src")
$("Element".attr(key,value)") '设置元素的属性
$("Element".attr({key:value,key1:value,....})) '一次为一个元素设置多个属性
$("Element").attr(key,function) '为所有匹配元素设置估计属性值。
$("Element").removeAttr(name)//删除一个属性
发表评论