004 学习目标第四期

一、常用的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元素尺寸、位置

答：