1230 jquery

jquery引入顺序

先引入css再引入js

css顺序：先引入框架css再引入自己css

js顺序：先引入jquery 再引入自己js

jquery 找元素格式：$(选择器)      数组： $(选择器).eq(下标)

例：

获得id是d1的元素de文本节点
var d1=$("#d1").html();
console.log(d1);

获取class是p1的元素
var p1=$(".p1").eq(0).html();
console.log(p1);
var p2=$(".p1").eq(1).html();
console.log(p2);
获取元素名为p的元素
var p3=$("p").eq(2).html();
console.log(p3);
获取带href的第一个元素
var a=$("[href]").eq(0).html();
console.log(a);
获取href属性等于xxx的第一个元素
var a1=$("[href='xxx']").eq(0).html();
console.log(a1);

操作内容：

找到的元素.html() 找到的元素.html('赋值') //相当于js的：jsDom.innerHtml = 赋值
找到的元素.val() 找到的元素.val('赋值') //相当于js的：jsDmo.value

例：

将id是d1的文本内容改为画面包包
$("#d1").html("画面包包");
获取id是b1元素的value属性
var b1=$("#b1").val();
console.log(b1);
获取id是b2的value属性
var b2=$("#b2").val();
console.log(b2);
将id是b1元素的value属性改为小红帽
$("#b1").val("小红帽");

操作样式：

jqDmo.css('color'); jqDmo.css('color','red');
jqDmo.css({
'color' : 'red',
'width' : '100px'
...
});

相当于js的：jsDom.style.color = 赋值   //只能操作行内样式

例：

将class是p1的字体颜色改为红色
$(".p1").eq(0).css("color","red");
$("p:last").css("color","green");
获取第一个p元素的字体颜色
console.log($("p:first").css("color"));
设置div的多种样式
$("#d1").css({
"width":"200px",
"height":"200px",
"background":"pink"
});

操作属性：

jqDom.prop('class');
jqDom.attr('class');
jqDom.attr('class','add');
jqDom.prop('class','add');
jqDom.attr({
'data' : 'add',
'id' : 'add',
...
});

相当于js的：

jsDom.getAttribute('class');
jsDom.setAttribute('class','add');
jsDom.removeAttribute('class');

jQDom.removeAttr('class')
jqDom.addclass('del')

js对象转为jquery对象：$(jsDom)

jquery对象转为js对象：$('div')[0]    或者 $('div').get(0)

例：

获取id是b1元素的type属性
console.log($("#b1").attr("type"));
获取id是b2的type属性
console.log($("#b2").prop("type"));
给ref属性是#的元素的两个属性
$("[href='#']").attr({
"title":"这是一个小可爱",
"target":"_blank"
});
移出href的title属性
$("[href='#']").removeAttr("title");

操作事件：

jqDom.click(function(){
$(this)
});

相当于js的：

jsDom.onClick = function(){
this
}