动态修改样式
$("#div1").attr("display","block"); //有问题
$("#div1").css("display","block");
find 寻找子标签
$(this).find(".price").text();
$(this).find("input").val();
jQuery
->*对象 $ #start
$(function () { }) 窗体加载
//javaScript 的一堆函数库jQuery(dom对象) //转换为jQuery对象$(dom对象) //转换为jQuery对象$(dom对象).ready(方法) //
$(document) // document对象 转换为jQuery对象$('body') // body对象 转换为jQuery对象ready加载元素后触发 比onload效率高onload加载元素慢$(function() { }); => $().ready() => $(document) //页面加载后触发;
$(function () {
$('#btn').click(function () {
//获取body中所有的元素
$('body *').css('backgroundColor','black');
});
});
->遍历数组 map/each #middle
$.map(数组,function(值参数,索引参数){ })//可以遍历 也可以返回新的数组//return 返回数组值$.each(数组,function(key,value){ }); //key键参数,value值参数//变量键值对 变量数组是不可以修改值//return fase 相当于break
->切空格 trim #middle
$.trim(字符串); //切空格 先左后右
->jquery变成dom对象 #middle
$(dom对象).get(0);$(dom对象)[0]; //两种都可以
->链式编程
返回是对象才能链式编程
->$().text(''); //相当于innerText;
->$().html(''); //相当于innertHTML;
->$().val(); //获取 value值
->隐式迭代 获取多个元素设值是 内部会全部循环 #end
->选择器s #start
->jQuery直接获取dom对象 #str
$('#id值') //id获取对象$(this).val() // this的value
->标签选择器 $('标签名')
->类选择器 $('.类名') // #mid
->标签+类选择器 #mid
$('标签名.类名')
//获取指定标签的类名为..的标签
->多条件选择器 mid
$('标签名,标签名.类名,id名...') //选中多个
->层次选择器 mid
$('标签名1 标签名2')
//获取 标签1 内的所有 标签2
$('标签名1>标签名2')
//获取 标签1 第一层的 所有标签2
$('标签名1+标签名2')
//标签名1的下一个同级元素//如果是 标签名2 就返回,不是就没有$('标签名1~标签名2')//标签名1的后面 的所有同级 标签名2$('标签名1~')//标签名1的后面 的所有同级 元素
->获取同级元素的方法 #mid
对象.next(); //对象 后的第一个同级元素对象.nextAll(); //对象 后的所有同级元素对象.nextAll('p'); //对象 后的所有同级 p标签 和'~'一样对象.prev(); //对象 前面的第一个同级元素对象.prevAll(); //对象 前面的所有同级元素对象.siblings(); //当前元素 的所有同级元素(不包含当前元素)
->两个参数_相对搜索 #mid
$('ul','#div')//在 #div 元素下搜索ul
->$('body *') //body的所有元素 #en
$().parent(); //获取当前元素的父级元素$().children('li') //当前元素的li子元素//没有参数就是所有子元素$('body *') //body的所有元素#end
->end() 连接 start
还原断链之前的元素(对象)$(this).prevAll()....end().nextAll()...->判断对象是否存在$(对象).length >0 //大于0存在
->样式 #middle
->$(dom对象).css('样式','值')
//设置样式
->设置多个样式
css({'ontSize':'20px','backgroundColor':'red'});
->添加_类样式
$(对象).addClass('样式名')
->移除_类样式
$(对象).remove Class('样式名')
->判断 类样式是否存在
$(对象).hasClass('样式名')
->切换 _类样式
$(对象).toggleClass('样式名')
->过滤器 : 号中间空格不能少
->索引常用 //索引从0开始 #str
->$('p:eq(2)') //索引为2的p标签
->$('p:lt(5)') //索引小于5的p标签
->$('p:gt(5)') //索引大于5的p标签
->:gt(5):lt(3))
$('#ul2 li:gt(4):lt(2)')//先按获得的gt(4) 第5个按0开始算 gt(2)
->$('div:first') //获取第一个元素
$('div').first 也可以
->$('div:last')
//获取最后一个元素
$('div').last
->$("input:not(.myClass)")
//选取样式名不是myClass的<input>$(':not(div)') //标签不是div的元素
->$('div:even') //索引为偶数
->$('div:odd') //索引为奇数
->$(':header') //所有的标题标签(h1,h2,h3,h4,h5,h6)
->属性过滤器 #mid
->$('input[name]')
//所有input标签中 有name属性的标签
->$('input[name=name1]')
//所有input标签中 name属性值 为name1的标签
->$('input[name!=name1]')
//所有input标签中 name属性值 不为name1的标签
->$('input[name^=na]')
//所有input标签中 name属性值以 na开头的标签
->$(input[name$=me])
//所有input标签中 name属性值以 me结尾的标签
->$('input[name*=a]')
//所有input标签中 name属性值 包含a 的标签
->复选框选中过滤器 #mid
->$('div :disabled') //在层中被禁用的元素
$('#fm1 :disabled[type=button]')
->checked
$('#fm1 :checked') //fm1中选中的元素
->selected
->$('div:disabled') //获取 被禁用到的层元素
->表单选择器 #mid
->$(':input')
s//获得所有input textarea select和button元素
$(:text) //获得文本框$(:checkbox) //获得复选选择框:button:radio:password
...
->可见性过滤器 #mid
hidden选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)1.表单元素type=“hidden”(表示的是隐藏域)2.设置css的display:none3.高度和宽度明确设置为0的元素。4.父元素时隐藏的,所以子元素也是隐藏的visibility: hidden 与opacity为0不算,因为还占位所以不认为是hidden.(与之前版本jQuery不太一样,1.3.2之前):visible选取所有可见元素注意:$('.cls :hidden');与$('.cls:hidden');是不一样的。
->内容过滤器 #mid
$('div:contains(帅)')//获取层中 含有 帅 的层$('div:empty')//获取层中 内容为空(空格也没有的) 的层$('div:has(input)')//获取层中 含有a标签 的层$('div:parent') //父元素//即该元素有子元素或者元素中包含文本。s
->子元素过滤器 #mid
$('ul li:first-child') //返回多个//所有ul 的第一个li元素$('ul li:first') //只返回一个//页面上第一个ul 的第一个li元素
$('ul li:last-child')//所有ul 的最后一个li元素$('ul li:last')//页面上第一个ul 的最后一个li元素
$('ul li:only-child')//所有ul 中只有一个子元素 的ul元素
->:nth-child,对比eq()来理解,eq()值匹配一个
,nth-child()为每个父元素都要匹配一个子元素。:nth-child(index),index从0开始。:nth-child(even):nth-child(odd):nth-child(3n),选取3的倍数的元素:nth-child(3n+1),满足3的倍数+1的元素。#en
->属性设值 #middle
->$().attr('属性名',值)
给元素属性设值 所有属性都可以设
->$().removeAttr('属性名')
移除属性
->元素的each #middle
元素数组.each(function(index,elem){ });//index是索引 elem是元素对象checkbox的遍历选择的和遍历不同组的radio
#end
#endregion