day04 jquery

以前通过js获取对象的时候

var obj=document.getElementById("id");

funtion getId(id){
return document.getElementById("id");
}

$("选择器")===>获取元素

jQuery: js类库,对常用的方法和对象进行封装,方便我们使用.

案例1-弹出广告

jquery是单独的js文件,通过script标签的src属性导入即可
获取一个jquery对象
$("选择器") 或者 jQuery("选择器")
dom对象和jquery对象之间的转换
　　dom对象===>jquery对象
　　　　$(dom对象)
　　jquery对象===>dom对象
　　方式1:　　jquery对象[index]
　　方式2:　　jquery对象.get(index)
页面加载:
js:
window.onload=function(){}//在一个页面中只能使用一次
jquery 在一个页面中可以使用多次
　　方式1:　　$(function(){...})
　　方式2:　　$(document).ready(function(){});
派发事件:
　　　　$("选择器").click(function(){...});　等价于原生js中dom对象.onclick=function(){....}
掌握事件:　　focus,blur,submit,change,click js原生事件去掉on

jquery中效果:
　　隐藏或展示　　show(毫秒数) hide(毫秒数) toggle() 开关
　　滑入或滑出　　slideDown(毫秒数):向下滑入， slideUp(毫秒数):向上滑出 slideToggle()
　　淡入或淡　　　fadeIn(int):淡入， fadeOut(int):淡出 fadeToggle()

选择器总结:
基本选择器★
　　$("#id值") $(".class值") $("标签名") 同原生的样式选择器
　　获取多个选择器用逗号隔开，$("#id值,.class值")
层次选择器 ★
　　a b:a的所有b后代 // a空格:selected 代表的a的后代中被选中的元素空格至关重要，
　　//没有空格表示a中被选中的元素，始终为0
　　a>b:a的所有b孩子
　　a+b:a的下一个兄弟(大弟弟)
　　a~b:a的所有弟弟
基本过滤选择器:★
　　:frist 第一个　　:last 最后一个　　:odd 索引奇数　　:even 索引偶数
　　:eq(index) 指定索引　　:gt(index) >　　:lt(index) <
内容过滤:
　　:has("选择器"):包含指定选择器的元素
可见过滤:
　　:hidden 在页面不展示元素一般指 input type="hidden" 和样式中display:none　　:visible
属性过滤器:★
　　[属性名]　　　　[属性名="值"]
表单过滤:
　　#form:input 所有的表单子标签 input select textarea button
　　#form input input 标签
////////////////////////////////////////////////////
案例2-隔行换色
技术分析:
1.页面加载成功
2.获取所有的奇数行添加一个css
3.获取所有的偶数行添加一个css

属性和css操作总结:
对属性的操作:
　　获取　prop("属性名称")；设置一个属性　　prop("属性名称","值");
　　设置多个属性 json

prop({
"属性1":"值1",
"属性2":"值2"
})

　　removeProp("属性名称"):移除指定属性

//添加class属性的时候
addClass("指定的样式值"); 相当于 prop("class","指定的样式值");
removeClass("指定的样式值");

对css操作:操作元素的style属性
　　获取　　css("属性名")；设置一个属性　　css("属性名","值")
　　设置多个

        css({
        "属性1":"值1",
        "属性2":"值2"
        });

获取元素的尺寸:　　width()　　height()
/////////////////////////////////////////////////
案例4-省市联动
步骤分析:
1.确定事件省份的下拉选变化的时候 change
2.编写函数
a.获取当前省份的value值
b.通过数组获取该省下的所有市返回值:数组
c.遍历数组,拼装成option元素追加到市下拉选即可
注意:每次改变的时候初始化市的值.
///////////////////////////
技术:
遍历数组
数组.each(function(){});
$.each(遍历数组,function(){});

注意:
each的function中可以加两个参数 index和dom
index是当前遍历的索引值
★★dom指代的是当前遍历的dom对象(开发中一般使用this即可)

$(function(){

$("[name=pro]").change(function(){
var $selected = $(this).select()
var $cityList = $(arr[$selected.val()]);

var $citySelect = $("[name=city]")
$citySelect.html("");

$cityList.each(function(index, dom){

// this 为列表里面每个元素
var html = "<option value= "+ index +">" + this +"</option>"
$citySelect.append(html);
})
})

View Code

//////////////////////////////
设置或者获取value属性
　　jquery对象.val():获取
　　jquery对象.val("...."):设置
/////////////////////////////////////////
设置获取获取标签体的内容
html()；text()
xxxxx():获取标签体的内容
xxxxx("....."):设置标签体的内容

设置的区别:
　　html:会把字符串解析　　text:只做为普通的字符串
获取的区别:

　　html:获取的html源码　　text:获取只是页面展示的内容
//////////////////////////////////////////////
创建一个元素: $("<标签></标签>")
///////////////////////
文档操作:
内部插入
　　a.append(c):将c插入到a的内部(标签体)后面
　　a.prepend(c):将c插入到a的内部的前面
外部插入
　　appendTo　　prependTo
删除
　　empty() 清空元素
　　remove() 删除元素
/////////////////////////////////
案例5-左右移动
表单对象属性过滤选择器
:enabled 可用的
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
:selected 选中的(针对于下拉选) hbuilderIDE中没有提示