小白- jquery 学习笔记

一、jQuery语法

 1.基础语法:$(selector).action() ; 

  工厂函数$():将DOM对象转化为jQuery对象

选择器 selector:获取需要操作的DOM 元素

方法action()jQuery中提供的方法,其中包括绑定事件处理的方法

  2.jQuery 入口函数:

1)搭建

<scriptsrc="js/jquery-1.12.4.js"type="text/javascript"></script>

2)执行

  $(document).ready(function(){

// 执行代码});或者

$(function(){

  // 执行代码});

二、基础方法

 1.操作页面元素的方法

 元素添加样式:

 Query 对象.addClass([样式名]);

 设置元素样式

 css("属性","属性值") ;//一个css

Css({"属性1":"属性值1","属性2":"属性值2"...}) ;//对个css

设置元素的显示和隐藏

  $(selector).show( );

$(selector).hide( );

 2.jQuery对象

 使用jQuery来获取元素对象: $(#title).html( ); 等同于  document.getElementById("title").innerHTML;

 DOM对象转化成jQuery对象

使用$()函数进行转化:

var txtName =document.getElementById("txtName");

var $txtName =$(txtName);  

在事件中经常使用$(this)this是触发该事件的对象

 

 jQuery对象转DOM对象

 jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象

 var $txtName =$ ("#txtName");

var txtName =$txtName[0];

 通过get(index)方法得到相应的DOM对象    

var $txtName =$("#txtName");

var txtName =$txtName.get(0);  

三、选择器获取元素

 1.了解:jQuery选择器类似于CSS选择器,用来选取网页中的元素

2.分类

一、基本选择器

 标签选择器   element

类选择器     .class

 ID选择器     #id

并集选择器   selector1,selector2,...,selectorN

全局选择器    *

  二、层次选择器

 后代选择器   ancestor descendant

 Eg:$(".textRight p").css("color","red");

子选择器     parent>child

Eg:$(".textRight>p").css("color","red");

相邻元素选择器  prev+next

 Eg:$("h1+p").css(text-decoration","underline");

 同辈元素选择器  prev~sibings

Eg:$("h1~p").css("text-decoration","underline");

三、属性选择器

选取给定属性是以某些特定值开始的元素  [attribute^=value]

选取给定属性是以某些特定值结尾的元素  [attribute$=value]

选取给定属性是以包含某些值的元素      [attribute*=value]

1.根据属性名获取元素

属性选择器可以根据是否包含某属性来选取元素

Eg:a标签带有class属性

 $("#news a[class]").css("background","#c9cbcb");

2.根据属性值获取元素

属性选择器可以根据属性的值来选取元素

Eg:class属性值为hot

 $("#news a[class='hot']").css("background","#c9cbcb");

属性选择器可以指定选取不等于属性是某个特定值的元素

Eg:class值不等于hot

$("#news a[class!='hot']").css("background","#c9cbcb");

根据属性值包含特定的值获取元素

属性选择器可以指定属性值以指定值开头的元素

Eg:A标签href属性值以www开头

$("#news a[href^='www']").css("background","#c9cbcb");

属性选择器可以指定属性值以指定值结尾的元素

a标签href属性值以html结尾

$("#news a[href$='html']"). css("background","#c9cbcb");

属性选择器可以指定属性值包含指定值的元素

a标签href属性值包含“k2”的元素

$("#news a[href*='k2']").css("background","#c9cbcb");

四、过滤选择器

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

2.分类

1)基本过滤选择器

:eq(index)选取索引等于index的元素(index0开始

:gt(index)  选取索引大于index的元素(index0开始

:lt(index)  选取索引小于index的元素(index0开始

:header   选取所有标题元素,如h1~h6

:focus    选取当前获取焦点的元素

:animated 选择所有动画

五、可见性过滤选择器

:visible  选取所有可见的元素

$("p:hidden").show();

:hidden 选取所有隐藏的元素

$("p:visible").hide();

四、事件

1.常用事件分类

基础事件

鼠标事件

键盘事件

window事件

表单事件

复合事件

鼠标光标悬停

鼠标连续点击

2.各事件方法

1.鼠标事件

 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件

 click( ) :$(selector).click(function)

 mouseover( ):$(selector).mousemove(function

mouseout( ):$(selector).mouseout(function)

mouseenter( ):$(selector).mouseenter(function)

mouseleave( ):$(selector).mouseleave(function)

2.键盘事件

用户每次按下或者释放键盘上的键时都会产生事件,常用键盘事件

keydown( ):$(selector).keydown(function)

keyup( ):$(selector).keyup(function)

keypress( ):$(selector).keypress(function)

3.浏览器事件

 调整窗口大小时,完成页面特效

 $(selector).resize( );

4.移除事件

$(selector).unbind(event,function)

参数event

可选。规定删除元素的一个或多个事件

由空格分隔多个事件值。

如果只规定了该参数,则会删除绑定到指定事件的所有函数。

Function

可选。规定从元素的指定事件取消绑定的函数名。

1.复合事件

hover( )方法

相当于mouseovermouseout事件的组合

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数

mouseovermouseout,如果只指定一个函数,则 mouseenter mouseleave 都执行它

hover(enter,leave);

toggle( )方法

切换元素的可见状态。

toggle( fn1,fn2...)实现单击事件的切换,无须额外绑定click事件

$(selector).toggle(speed,callback,switch)

Speed

规定元素从可见到隐藏的速度(或者相反)。默认为 "0"

可能的值:

  • 毫秒 (比如 1500
  • "slow"
  • "normal"
  • "fast"

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数,则无法使用 switch 参数。

Callback 当动画 100% 完成后,即调用 Callback 函数除非设置了 speed 参数,否则不能设置该参数。

Switch,布尔值,规定 toggle 是否隐藏或显示所有被选元素。

  • True - 显示所有元素
  • False - 隐藏所有元素

toggleClass()

    class

对设置或移除被选元素的一个或多个类进行切换。

必需。规定添加或移除 class 的指定元素。

如需规定若干 class,请使用空格来分隔类名。

Switch  可选。布尔值。规定是否添加或移除 class。

 

 

 

 

 

原文地址:https://www.cnblogs.com/ttg-123456/p/11196932.html