初始jquery_jquery 初始化页面样式设置-CSDN博客

本文链接：https://blog.csdn.net/kai521314/article/details/82625439

初识JQuery的应用：
进入jQuery官网：http://jquery.com
jQuery的语法是：
工厂函数$()：将DOM对象转化为jQuery对象
选择器
selector：获取需要操作的DOM 元素
方法action()：
jQuery中提供的方法，其中包括绑定事件处理的方法

JQuery操作页面元素：
使用addClass( )方法为元素添加样式

    使用css( )方法设置元素样式

    使用show( )、hide( ) 方法设置元素的显示和隐藏

设置元素的显示和隐藏的语法：
1. $（selector）.shou(); 是显示的方法。 2.$ （selector）.hide(); 是隐藏的方法。
连式操作：
对一个对象进行多重操作，并将操作结果返回该对象。
next（）取回该选着器的下一个同胞元素。
语法： $(“h2”).css(“background-color”,”#ccffff”).next().css(“display”,”block”); 隐式迭代：语法：$ (document).ready(function() {

    $("li").css({"font-weight":"bold","color":"red"});

});

DOM对象：直接使用javaScript获取的节点对象：
var objDom=document.getElementById(“”);
var objHTML=objDOM.innerHTML;
jQuery对象：使用jQuery包装DOM对象后产生的对象。它能够使用jQuery中的方法：
$（）.html();或document.getElementById(“”).innerHtml;
Dom对象和jQuery对象分别拥有一套独立的方法，不能混用。

1.使用 $()函数进行转化：$ （DOM对象）
语法：var 变量名=document.getElementById(“获得DOM对象”);
var $变量名=$ (变量名)；

2.jQuery对象是一个类似数组的对象，可以通过【index】的方法得到相应的DOM对象。
第一种语法：var $变量名=$ (“jQuery对象”)；
var 变量名= $变量名[0]；通过get(index)方法得到相应的DOM对象第2种语法 var$ 变量名= $(“jQuery对象”)； var 变量名=$ 变量名.get(0)；

jQuery选择器分类：
1.通过CSS选择器选取元素

    基本选择器

    层次选择器

    属性选择器

2.通过过滤选择器选择元素

    基本过滤选择器

    可见性过滤选择器

基本选择器包括标签选择器，类选择器，ID选择器，并集选择器和全局选择器：
标签选择器： element 根据给定的标签名匹配元素
类选择器： .class 根据给定的class匹配元素
ID选择器： #id 根据给定的ID匹配元素
并集选择器：将每一个选择器匹配的元素合并后一起返回。
全局选择器： * 匹配所有元素
层次选着器：

后代选择器 ancestor descendant 选取ancestor元素里的所有descendant（后代）元素
子选择器 parent>child 选取parent元素下的child（子）元素
相邻元素选择器 prev+next 选取紧邻prev元素之后的next元素
同辈元素选择器 prev~sibings 选取prev元素之后的所有siblings元素

属性选择器：
[attribute^=value] 选取给定属性是以某些特定值开始的元素
[attribute$=value] 选取给定属性是以某些特定值结尾的元素
[attribute*=value] 选取给定属性是以包含某些值的元素

通过特定的过滤规则来筛选出所需的元素

    1.主要分类

    2.基本过滤选择器

    3.可见性过滤选择器

    4.表单对象过滤选择器

    5.内容过滤选择器、子元素过滤选择器……

过滤选择器的语法：
:first 选取第一个
:last 选取最后一个
:even 选取索引偶数的所有元素
:odd 选取索引是奇数的所有元素
:eq(index) 选取索引等于index的元素（index从0开始） $(“li:eq(1)”?)选取索引等于1的

元素
:gt(index) 选取索引大于index的元素（index从0开始） $(” li:gt(1)”?)选取索引大于1的
元素（注：大于1，不包括1）
:lt(index) 选取索引小于index的元素（index从0开始） $(“li:lt(1)”?)选取索引小于1的
元素（注：小于1，不包括1）
:header 选取所有标题元素，如h1~h6 $(“:header”?)选取网页中所有标题元素 :focus 选取当前获取焦点的元素$ (“:focus”?)选取当前获取焦点的元素
:animated 选择所有动画 $(“:animated” )选取当前所有动画元素
可见性的选择器：
：visible 选取所有课件的元素
：hidden 选取所有隐藏的元素

jQuery事件是对javaScript事件的封装，常用事件分类：
1.基础事件：鼠标事件、键盘事件、window事件、表单事件
2.复合事件：鼠标光标悬停、鼠标连续点击
鼠标事件：
click( ) 触发或将函数绑定到指定元素的click事件单击鼠标时
mouseover( ) 触发或将函数绑定到指定元素的mouseover事件鼠标指针移过时
mouseout( ) 触发或将函数绑定到指定元素的mouseout事件鼠标指针移出时
mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件鼠标指针进入时
mouseleave( ) 触发或将函数绑定到指定元素的mouseleave事件鼠标指针离开时
键盘事件：
keydown() 触发或将函数绑定到指定元素keydown事件按下键盘时
keyup() 触发或将函数绑定到指定元素keyup事件释放按键时
keypress() 触发或将函数绑定到指定元素keypress事件产生可打印的字符时
window事件：
$(selector).resize(); 调整窗口大小时，完成页面特效。绑定事件和移除事件：$ (document).ready(function(){
```
    $(".on").bind("mouseover",function(){

    $(".topDown").show();
});

事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
```
移除事件使用unbind()方法：
当unbingd()不带参数时，表示移除所绑定的全部事件

复合事件：hover()方法：注意写完后面的逗号非常重要：
语法： $(变量名)hover(function(){ $(变量名).show();//鼠标移入时触发 },function(){ $(变量名).hide();}//鼠标移除时触发 toggle()方法用书模拟鼠标连续Click事件：语法：$ (“input”).toggle(
function(){ $(“body”).css(“background”,”#ff0000”);}, function(){$ (“body”).css(“background”,”#ff0000”);},
function(){$(“body”).css(“background”,”#ff0000”);},
)
toggle()方法不带参数，与show()和hide()方法作用一样：
toggleClass()实现事件触发兑现在加载摸个样式和移除某个样式之间切换

jQquery中的DOM操作：
jQuery对JavaScript中的DOM操作进行了封装
```
    jQuery中的DOM操作

    样式操作

    内容及Value值操作

    节点操作
```
节点属性操
作
节点遍历
```
    CSS-DOM操作

元素和节点含义大同小异，本章不严格区分。
```
追加样式：addClass
移除样式：removeClass
切换样式：toggleClass
toggleClass相当于removeClass和addClass的操作。

判断是否含指定的样式：hasClass
返回的类型是：true或false
内容操作：
HTML代码的操作：
要把想输入的元素添加到网页语法是：
var str=”输入要想添加的东西”
$(“添加到一DIV中”).html（str） text添加元素就是把里面所有的内容都输出出来包括标签：语法：var str=”输入要想添加的东西”$ (“添加到一DIV中”).text（str）

html(?) 无参数用于获取第一个匹配元素的HTML内容或文本内容
html(content) content为元素的HTML内容用于设置所有匹配元素的HTML内容或文本内容
text(?) 无参数用于获取所有匹配元素的文本内容
text (content) content为元素的文本内容用于设置所有匹配元素的文本内容

val()可以获取或设置元素的value属性值：
语法： $(this).val();不加内容是获取这个value值$ (this).cal(“value”) 添加值是要输入修改里面的值。
要加入判断输入，先设置空，如果值为空在给填入响应的值。
节点操作：元素内部插入子节点
append $(“a”).append(B) 表示将B追加到A中 appendTo 表示将A追加到B中 prepend$ (“a”).prepend(B) 表示把B前置插入到A中
prependTo 表示把A前置插入到B中
元素外部插入同辈节点：
after $(A).after(B) 表示将B插入到A之后 insertArtrt 表示将A插入B之后 before 表示将B插入到A之前 insertBefore 表示将A插入到B之前 jQquery提供了三种删除节点的方法： remove(); 删除整个节点 empty(); 清空节点内容，位子还保留着。 detach（）；删除整个节点，保留元素的绑定事件、附加数据 replaceWith（）和replaceAll（）用于替换某个节点：语法：$ （要替换的节点）.replaceWith(新的节点替换前面的)

clone()用于复制某个节点：
语法： $(“要复制的节点”).click(funtion(){$ (this).clone(true).appendTo(“复制到什么地方”)})；
如果里面是true能把复制的事件也能复制过来，如果里面是false就不复制到事件。

属性操作：获取元素设置属性：
attr()用来获取属性值：
删除属性的值：removeAttr
$(“找到要删除的属性”).removeAttr(“输入要删除的属性值！！”)

节点遍历：
children（）方法可以用来获取元素的所有子元素，只包含子元素，不包含孙子元素。
jQuery可以获取紧邻其后。紧邻其前和位于该元素前与后的所有同辈元素。
next 用于获取紧邻匹配元素之后的元素
prev 用于获取紧邻匹配元素之前的元素
slibings 用于获取紧邻匹配元素之前和元素之后的同辈元素。
jQuery中可以变量前辈元素
parent（）；获取元素的父级元素
parents();获取元素的祖先元素
each():规定为每个匹配元素规定运行的函数：
语法： $(“img”).click(function(){ 设定点击图片$ (“li”).each(function(){ 遍历每个li元素
var a= $(this).text(); 获取当前li元素中的内容$ (“section”).append(str);})}) 把内容追加到“section”
end():结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态：