jquery和html的整合
- jquery是单独的js文件 ，通过script标签的src属性导入即可
- 注意：使用jquery的时候如果放到整个网页的前面，需要把jquery代码放到页面加载函数中。否则应该把jquery代码放到整个网页的后面。
获取一个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
jquery中效果:
-
隐藏或展示
show(毫秒数) hide(毫秒数) -
滑入或滑出
slideDown(毫秒数):向下滑入 slideUp(毫秒数):向上滑出 -
淡入或淡出
fadeIn(int):淡入 fadeOut(int):淡出
选择器总结:
-
基本选择器★
$("#id值") $(".class值") $("标签名") 了解:$("*") 理解:获取多个选择器 用逗号隔开 $("#id值,.class值") -
层次选择器 ★
a b:a的所有b后代 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 -
属性过滤器:★
[属性名] [属性名="值"] -
表单过滤:
:input 所有的表单子标签 input select textarea button
属性和css操作总结:
-
对属性的操作:
attr():设置或者获取元素的属性 方式1:获取 attr("属性名称") 方式2:设置一个属性 attr("属性名称","值"); 方式3:设置多个属性 json attr({ "属性1":"值1", "属性2":"值2" }) removeAttr("属性名称"):移除指定属性 添加class属性的时候 attr("class","值"); addClass("指定的样式值"); 相当于 attr("class","指定的样式值"); removeClass("指定的样式值"); -
对css操作:操作元素的style属性
css():获取或者设置css样式 方式1:获取 css("属性名") 方式2:设置一个属性 css("属性名","值") 方式3:设置多个 css({ "属性1":"值1", "属性2":"值2" }); -
获取元素的尺寸:
width() height()
遍历数组
数组.each(function(){});
$.each(遍历数组,function(){});
-
注意:
each的function中可以加两个参数 index和dom index是当前遍历的索引值 dom指代的是当前遍历的dom对象(开发中一般使用this即可) -
设置或者获取value属性
jquery对象.val():获取 jquery对象.val("...."):设置 -
设置获取获取标签体的内容
html() text() xxxxx():获取标签体的内容 xxxxx("....."):设置标签体的内容 设置的区别: html:会把字符串解析 text:只做为普通的字符串 获取的区别: html:获取的html源码 text:获取只是页面展示的内容