1.jQuery语法

基础语法
1、美元符号 $定义jQuery

jq入口函数
$(function(){
Jq内容
}
注意点:
通过jq获取的id比较特殊,也是获取的多个,使用时需要加下标[]

2、选择符(selector)"查询"和"查找"HTML元素
3、jQuery的action()执行对元素的操作。

了解jQuery的$符号

$(function() {});//参数是function,说明是入口函数js
$(“#btnSetConent”);//参数是字符串,并且以#开头,是一个标签选择,查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象

JQuery选择器

什么是jQuery选择器

1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

2、jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。

3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

4、jQuery 中所有选择器都以美元符号开头:$()。

基本选择器

基本选择器

名称

用法

描述

ID选择器

$(“#id”);

获取指定ID的元素

类选择器

$(“.class”);

获取同一类class的元素

标签选择器

$(“div”);

获取同一类标签的所有元素

并集选择器

$(“div,p,li”);

使用逗号分隔,只要符合条件之一就可。获取所有的div、p、li元素

交集选择器(标签指定式选择器)

$(“div.redClass”);

注意选择器1和选择器2之间没有空格,class为redClass的div元素,注意区分后代选择器。

总结:和css选择器的用法一模一样

层级选择器

名称

用法

描述

子代选择器

$(“ul>li”);

使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素

后代选择器

$(“ul li”);

使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

总结:跟CSS的选择器一模一样。

过滤选择器

lt 小于 gt 大于 le 小于等于 ge 大于等于


用法

描述

:eq(index

$(“li:eq(2)”).css(“color”, ”red”);

获取到的li元素中,选择索引号为2的元素,索引号index从0开始。

:odd

$(“li:odd”).css(“color”, ”red”);

获取到的li元素中,选择索引号为奇数的元素

:even

$(“li:even”).css(“color”, ”red”);

获取到的li元素中,选择索引号为偶数的元素

总结:这类选择器都带冒号。Lt   gt

筛选选择器(方法)


用法

说明

children(selector)

$(“ul”).children(“li”)

相当于$(“ul>li”),子类选择器

find(selector)

$(“ul”).find(“li”);

相当于$(“ul li”),后代选择器

siblings(selector)


$(“#first”).siblings(“li”);

查找兄弟节点,不包括自己本身。

parent()

$(“#first”).parent();

查找父亲

eq(index)

$(“li”).eq(2);

相当于$(“li:eq(2)”),index从0开始

next()

$(“li”).next()

找下一个兄弟

prev()

$(“li”).prev()

找上一次兄弟

Index()

$(“li”).index()

获取当前的位置(索引)

not()

$("p").not(".intro")

返回不带有类名 "intro" 的所有 <p> 元素

总结:筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。

jQuery事件

 

事件语法

1、单击事件


$("p").click(function(){

// 动作触发后执行的代码!!

});


  1. 双击事件
$("p").dblclick(function(){

    $(this).hide();

})


3、鼠标进入


$("#p1").mouseenter(function(){

alert('您的鼠标移到了 id="p1" 的元素上!');

});


4、鼠标离开


$("#p1").mouseleave(function(){

alert("再见,您的鼠标离开了该段落。");

});


5、获取焦点


$("input").focus(function(){

$(this).css("background-color","#cccccc");

});


6、失去焦点


$("input").blur(function(){

$(this).css("background-color","#ffffff");

});

jQuery css() 方法

一个参数:获取

字符串:获取属性值

对象:设置对象中所有的属性和值

两个参数:设置

返回 CSS 属性

如需返回指定的 CSS 属性的值,请使用如下语法:



css("propertyname");

$("p").css("background-color");



(3)、设置CSS属性

如需设置指定的 CSS 属性,请使用如下语法:



css("propertyname","value");

$("p").css("background-color","yellow");



(4)、设置多个CSS属性

如需设置多个 CSS 属性,请使用如下语法:

css({"propertyname":"value","propertyname":"value",...});

$("p").css({"background-color":"yellow","font-size":"200%"});



jq中添加类

  • 类的添加删除和切换
  • addClass() 添加类
  • removeClass() 删除类
  • toggleClass() 切换
$($('button')[2]).click(function(){
                 $('li').toggle()
             })
jq添加类
          $($('li')[1]).addClass('c1')
             $('li:eq(1)').addClass('c1')
            $('li')[1].className='c1'
             $('li:eq(1)').removeClass('c2')
            $($('div')[0]).click(function(){
                $('body:eq(0)').toggleClass('c1')
            })

 

JQ动画

hide()show()

$($('button')[0]).click(function(){
                 $('li').hide() // hide隐藏,
             })
             $($('button')[1]).click(function(){
                 $('li').show()//show显示
             })

fadeOut淡入,fadeIn淡出,fadeToggle切换,fadeTo变成某个透明色

// fadeOut淡入,fadeIn淡出,fadeToggle切换,fadeTo变成某个透明色
             $($('button')[0]).click(function(){
                 $('li').fadeOut('fast')
             })
             $($('button')[1]).click(function(){
                $('li').fadeIn()
             })
            $($('button')[2]).click(function () {
                 $('li').fadeToggle()
             })
            $($('button')[2]).click(function () {
                 $('li').fadeTo(3000,0)
             })

JQ滑动效果

slideUp()上滑
sildeDown()下滑
slideToggle()切换,切换效果为上滑或者下滑

 

自定义动画

animate() 方法用于创建自定义动画可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。

自定义动画
            $($('button')[2]).click(function () {
                $('li').animate({
                    opacity: '0.5',
                    height: 'toggle',
                    width: 'toggle'
                }, 3000, function () {
                    alert("动画结束")   
                })
            })

Stop方法

stop()会把overflow:hidden清除

stop方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前,适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

             stop停止动画,但是会清除掉overflow:hidden
            $($('button')[3]).click(function () {
                $('li').stop()
            })

        })

jQuery 事件机制

  1. 注册事件
动态绑定  on
             $('ul').on('click','li',function(){
                 console.log(456)
             })
  1. 事件对象event
  2. event对象有以下属性
    type:事件类型,比如click。
    which:触发该事件的鼠标按钮或键盘的键。
    target:事件发生的初始对象。
    data:传入事件对象的数据。
    pageX:事件发生时,鼠标位置的水平坐标(相对于页面左上角)。
    pageY:事件发生时,鼠标位置的垂直坐标(相对于页面左上角

jQuery 对HTML的设置与捕获

html()

html() - 设置或返回所选元素的内容(包括 HTML 标记)

("#btn2").click(function(){
 alert("HTML: " + $("#test").html()); 
});
$("#btn2").click(function(){ 
$("#test2").html("<b>Hello world!</b>"); 
});

text()

text() - 设置或返回所选元素的文本内容

$("#btn1").click(function(){ 
alert("Text: " + $("#test").text()); 
});
$("#btn1").click(function(){ 
$("#test1").text("Hello world!"); 
});

val()

设置input里面的表单值 val();

$(‘input’).val(‘123’);

attr() 添加新属性,设置旧属性

设置页面尺寸

添加元素

append 向尾部添加

prepend 向开头添加

before 在什么之前

after 在什么之后

remove 删除

empty 清空