基础系列【十八】--HTML-JS-CSS-JQ

选择器

基本选择器(1) 标签名(元素名)选择器    格式: 元素名{}, 如: span{}(2) 类(class)选择器     格式: .类名{ css属性 }, 如: .c1{}(3) ID选择器    格式: #id值{ css属性 }, 如: #d1{}
扩展选择器
(1)后代选择器    格式: 父选择器 后代选择器{  }
#d1 span{background-color: #DDA0DD;font-size: 22px;}
(2)子元素选择器  格式: 父选择器>子元素选择器{  }#d1>span{background-color: #DEB887;font-size: 16px;}
(3)分组选择器格式:选择器1,选择器2,选择器3,…选择器n{}.c1,.c2,#p1 span{background-color: #F4A460;}
(4)属性选择器格式: 选择器[属性条件..]{}*[class]{border: 2px solid gray;}input[type="text"]{background-color: red;text-indent: 10px;}(5)相邻兄弟选择器格式: 大哥+小弟{  }
(6)伪元素选择器
:link   表示元素未被点击时的状态
:hover  表示光标(鼠标)悬停时的状态(掌握!)
:active 表示元素被点击时的状态
:visited    表示元素被点击之后的状态

外边距/边框/内边距

margin – 外边距margin: 10px 20px 40px 60px;/*上、右、下、左*/margin: 20px 10px;/*上下、左右*/
margin: 20px;/*上下左右*/
注意: 垂直外边距合并的现象:border – 边框border: 5px solid green;border-top:5px solid green;padding – 内边距padding: 10px 20px 40px 60px;/*上、右、下、左*/padding: 20px 10px;/*上下、左右*/padding: 20px;/*四个边距*/

常用的css属性

display属性 -- 设置元素的显示方式block: 块级元素的默认值inline: 行内元素的默认值inline-block: 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高)none: 用来隐藏一个元素, 这种方式的隐藏是真的隐藏了, 元素在原位置不再占用空间visibility: hidden 这种方式也可以隐藏一个元素, 但是这种隐藏只是元素不显示了, 在原位置仍然占用空间（很少用到
text-align 设置元素中文本水平对齐方式left/right/center/justify: 
list列表属性list-style-type: none/disc/square/circle...
字体属性font-size：尺寸  font-weight：加粗   font-family：字体   color：颜色line-height：    行高   text-decoration：下划线其他width 设置宽度     height 设置高度

框架标签

frameset – 定义一个框架集

JQ

1.jQuery概述

1.1.什么是jQuery
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 函数库。
1.2.jQuery的优势
可以简化JavaScript代码
可以像css那样获取元素
可以修改css来控制页面效果
可以兼容常用的浏览器
1.3.jQuery版本支持
jQuery分为很多版本, 还分为未压缩版和压缩版, 根据需要选择对应的版本进行下载!
1.x  支持常用的浏览器和IE6+
2.x  支持常用的浏览器和IE9+
3.x  支持常用的浏览器和IE9+
注意:  jQuery不兼容老版本. 因为jQuery升级除了会做一些内部优化之外, 还会删除以前的一些代码, 比如删除一些方法. 或者是添加一些新的方法。所以在升级之后， 以前的代码可能会无法执行。1.4.jQuery引入
jQueyr类库其实就是一个普通的js文件, 和之前在html中引入js文件方式是一样的！！！

2.jQuery语法

2.1.$介绍
$符号等价于jQuery, 是jQuery单词的简写
例如：$()相当于调用jQuery()，该函数会返回一个jQuery对象, 这个jQuery对象中包含零个或多个html元素, 比如: $("div")，可以通过jQuery中提供的方法来操作这些匹配的元素，比如$("div").remove()；
2.2.文档就绪事件所谓的文档就绪事件, 就是在整个html文档加载完之后立即触发, 执行一些操作，格式如下：
$(document).ready(function(){//xxxx
});该函数会在整个html文档加载完之后立即执行! 其作用相当于: 
window.onload = function(){ //xxx  }其简写形式为: 
$(function(){//xxxx
});
2.3.DOM对象和jQuery对象互相转化
JS对象只能调用JS上提供的属性和方法, 不能调用jQuery提供的属性和方法, 如果非要使用, 必须将JS对象转化成jQuery对象！反之亦然。
2.3.1.dom对象转jQuery对象
var dom = document.getElementById("username");
var $jQuery= $(dom );   // js对象转成jQuery对象
2.3.2.jQuery对象转dom对象:var $jQuery = $("#username");
//方式一: 
var dom1 = $jQuery[0];    // jQuery对象转成js对象//方式二:
var dom2 = $jQuery.get(0);    // jQuery对象转成js对象

3.jQuery选择器

3.1.基本选择器3.1.1.元素名选择器$("div") – 匹配所有的div元素3.1.2.class选择器$(".c1") – 匹配所有class值为c1的元素$("div.c1") – 匹配所有class值为c1的div元素3.1.3.id选择器$("#d1") – 匹配所有id值为d1的元素$("div#d1") – 匹配所有id值为d1的div元素3.1.4.*号匹配符("*") – 匹配所有的元素3.1.5.多元素选择器$("div,span,#d1,.c1") – 匹配所有的div/span元素以及id值为d1的元素和class值为c1的元素。。。3.2.层级选择器如果想通过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。$("div span") – 匹配div下所有的span元素$("div>span") – 匹配div下所有的span子元素$("div+span") – 匹配div后面紧邻的span兄弟元素$("div~span") – 匹配div后面所有的span兄弟元素3.3.基本过滤选择器过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 ":" 开头$("div:first") – 匹配所有div中的第一个div元素$("div:last") – 匹配所有div中的最后一个div元素$("div:even") – 匹配所有div中索引值为偶数的div元素，0开始$("div:odd") – 匹配所有div中索引值为奇数的div元素，0开始$("div:eq(n)") – 匹配所有div中索引值为n的div元素，0开始$("div:lt(n)") – 匹配所有div中索引值小于n的div元素，0开始$("div:gt(n)") – 匹配所有div中索引值大于n的div元素，0开始$("div:not(.one)") – 匹配所有class值不为one的div元素3.4.内容选择器（$("div:contians('abc')") – 匹配所有div中包含abc内容的div元素如: xxxabcxx$("div:has(p)") – 匹配所有包含p元素的div元素如: 
$("div:empty") – 匹配所有内容为空的div元素如: $("div:parent") – 匹配所有内容不为空的div元素如: xxxxx3.5.可见选择器$("div:hidden") – 匹配所有隐藏的div元素$("div:visible") – 匹配所有可见的div元素3.6.属性选择$("div[id]") – 匹配所有具有id属性的div元素$("div[id='d1']") – 匹配所有具有id属性并且值为d1的div元素$("div[id!='d1']") – 匹配所有id属性值不为d1的div元素$("div[id^='d1']") – 匹配所有id属性值以d1开头的div元素$("div[id$='d1']") – 匹配所有id属性值以d1结尾的div元素3.7.子元素选择器$("div:nth-child(n)") – n从1开始, 匹配div中第n个子元素。$("div:first-child") –匹配div中第1个子元素。$("div:last-child") –匹配div中最后一个子元素。。。3.8.表单选择器$(":input") – 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button。$(":password") – 匹配所有的密码框$(":radio") – 匹配所有的单选框$(":checkbox") – 匹配所有的复选框$(":checked") – 匹配所有的被选中的单选框/复选框/option$("input:checked") – 匹配所有的被选中的单选框/复选框$(":selected") – 匹配所有被选中的option选项4.文档操作parent() $("#d1").parent() – 获取id为d1元素的父元素parents()$("#d1").parents() – 获取id为d1元素的祖先元素$("#d1").parents("tr") – 获取id为d1元素的tr祖先元素next()$("div").next() – 获取所匹配元素后面紧邻的兄弟元素$("div").next("span") – 获取所匹配元素后面紧邻的span兄弟元素nextAll()$("div").nextAll() – 获取所匹配元素后面所有的兄弟元素$("div").nextAll("span") – 获取所匹配元素后面所有的span兄弟元素prev()$("div").prev() – 获取所匹配元素前面紧邻的兄弟元素$("div").prev("span") – 获取所匹配元素前面紧邻的span兄弟元素prevAll()$("div").prevAll() – 获取所匹配元素前面所有的兄弟元素$("div").prevAll("span") – 获取所匹配元素前面所有的span兄弟元素siblings()$("div").siblings() – 获取所匹配元素前后所有的兄弟元素$("div").siblings("span") – 获取所匹配元素前后所有的span兄弟元素append()$("div").append("") –为所匹配元素追加一个span子元素remove()$("div").remove() – 删除所匹配元素html()$("div").html() – 获取所匹配元素的html内容$("div").html("xxx") – 为所匹配元素设置html内容text()$("div").text() – 获取所匹配元素的文本内容$("div").text("xxx") – 为所匹配元素设置文本内容attr()$("div").attr("id") – 获取所匹配元素的id属性值$("div").attr("id", "xx") – 为所匹配元素设置id属性css$("div").css("width") – 获取所匹配元素的width样式属性值$("div").css("width", "200px") – 为所匹配元素设置width样式属性$("div").css({"width":"200px", "color":"red","font-size":"24px" }) ;    – 为所匹配元素设置width样式属性5.事件 click()$("div").click(function(){}) – 为所匹配元素绑定点击事件blur()$("input").blur(function(){}) – 为所匹配元素绑定失去输入焦点事件focus()$("input").focus(function(){}) – 为所匹配元素绑定获得输入焦点事件change()$("select").change(function(){}) – 为所匹配元素绑定选项切换事件ready()$(document).ready(function(){}) – 文档就绪事件其作用相当于:  window.onload = function(){}简写形式为:$(function(){}) – 在整个文档加载完成后立即执行6.效果 show()$("div").show() – 将隐藏元素设置为显示(底层操作的是display);hide()$("div").show() – 将显示元素设置为隐藏(底层操作的是display);toggle()$("div").toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见.下一篇：[【基础系列十九】--Oracle](https://mp.csdn.net/mdeditor/103171447)

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！