一、常用的JQ选择器
答:统一标准 $(“选择器”)
层级选择器
筛选选择权:
筛选方法(重点)
JQ中排他思想
利用隐式迭代非常方便,siblings
二、操作JQ样式
答:$(“div”).css(“background”,"pink");
隐式迭代:遍历DOM元素(伪数组形式)的过程。不需要在循环操作
少:则元素操作,多:则类操作
属性名一定要加“”
1、常用方法
1、$('div').css("width"); //只返回当前宽度值
2、$('div').css("width","200px"); //修改宽度属性为200px
3、$('div').css({
width:400,
height:400,
backgroundColor:"red", }) //也可以 不用加引号 。符合属性要用驼峰命名法
2、添加类
$(this).addClass('current'); //添加类 就有了这个类的属性
$(this).removeClass('current'); //用完即删除
$(this).toggleClass('current'); //切换类 有或者无
三、常用的JQ动画(效果)
答:
事件切换 $(“div”).hover( function(){},function() {}) //模仿悬停事件 ,鼠标停留和离开
$(.nav>li).hover(function() {
$(this).children("ul").sideDown(200);
};function() {
$(this).children("ul").sideUp(200);
});
如果hover只写一个函数,则鼠标经过或者离开都会触发这个函数。
$(“div”).hover( function(){
$(this).chindren("ul").slideToggle();})
stop //只执行最新的指令,停止之前的动画,避免动画都要执行 排队。必须写在动画的前面: 停的是前一个动画
$(“div”).hover( function(){
$(this).chindren("ul").stop.slideToggle();})
1、显示隐藏 show() ; hide(); toggle ();
show([speed,[easing],[fn]])
speed :slow normal fast; 速度
easing :swing linear 切换效果
fn :回调函数,完成动画时执行的函数,每个元素执行一次
2、滑动 slideDown(); slideUp() slideToggle();
3、淡入淡出 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
修改透明度 0-1之间 fadeTo(1000,0.5) //速度和透明度必须要写
4、自定义动画 animate();
animate(params,[speed],[easing],[fn]) //params:想要修改的样式属性
四、操作JQ属性
答:获取JQ属性
1、固有属性
$(function() {
console.log($("a").prop("href"));
})
2、自定义属性
JQ中标签的属性用.prop("href")即可 ,而自定义属性 用.attr("index")
attr("属性") ==getAttribute ;
attr("属性","属性值") ==setAttribute;
3、数据缓存 data();//在console里面看不到 但是可以用
$("span").data("uname","andy");
console.log($("span").data("uname"));
对内容文本进行操作
1、html()
$("div").html() //小括号为空就是得到这个元素的内容
$("div").html(“123”) //赋值为123
2、text()
$("div").text(); //上面的带标签 这个是标签中的内容
$("div").text("123")
3、 val();
$("div").val(); //设置表单值
$("div").val("123")
$(“div”).each(function(index, domEle) {
})
// 第一个参数可以自定义,第二个参数返回的是DOM元素 ,因此不能用JQ方法操作 ,要转换成JQ元素
$(domEle).css("color","blue");
$(function() {
//针对同一类元素做不同操作,类似与for ,隐式迭代是个干扰 应该怎么操作
//1.each()
var arr = ["red","yellow",blue""];
$("div").each(function(index,domEle) {
$(domEle).css("color",arr[index]);
})
})
求和 则:
sum = parseInt($(domEle).text());
$(function() {
//针对同一类元素做不同操作,类似与for ,隐式迭代是个干扰 应该怎么操作
//1.$.each() 更多用于处理数据
var arr = ["red","yellow",blue""];
$.each($("div"),function(index,ele) {
$(domEle).css("color",arr[index]);
})
})
//ele 是里面的数据,内容 遍历输出和对象都可以
例如 $.each( {
name:andy,
age:18
},function(i ,ele) {
则 console.log(i); //输出的是 nage age 属性名
console.log(ele);//输出的则是 Andy 18 属性值
})
})
写一个封装函数,计算总件数和总额,都用的$.each
function getSum() {
var count = 0; //计算总件数
bar noney = 0; //计算总价钱.
$(".itxt").each(function(i,ele) {
count+=praseInt($(ele).val()); //这里是value,还有要转换成数字型
});
$(".auount_sum em").text(count); //这里是text内容
$(".p_sum").each(function(i,ele){
money += parseFloat($(ele).text().substr(1);//从第一位开始 去掉¥符号
})
$(".price_sum em").text(money.toFixed(2)); //小数学数字相加会出现很多位小数 保留两位
五、操作JQ元素
答:
1)创建+内部添加(生成是父子关系 ul>li)
var li = $("<li>我是后来创建的li</li>");
$("ul").append(li); 只有插入到一个位置,创建的元素才会显示 放最后面
$("ul").prpend(li); 只有插入到一个位置,创建的元素才会显示 放最前面
创建+外部添加 (生成是兄弟关系 div + .text)
var div = $("<li>我是后来的li</li>");
$(".text").after(div); 只有插入到一个位置,创建的元素才会显示 放最后面
$(".text").before(div); 只有插入到一个位置,创建的元素才会显示 放最前面
2)删除元素,三种方法
$("ul").remove(); //可以删除匹配的元素 自杀
$("ul").empty();//可以删除陪陪元素里面子元素,孩子 本身标签还在
$("ul").html("");//可以删除陪陪元素里面子元素,孩子 本身标签还在
六、操作JQ元素尺寸、位置
答: