jQuery引用要么互联网资源,要么本地资源

第一个jQuery程序

        $('div').html("hello.world");

DOM对象和jQuery对象互转化

jQuery对象和DOM对象是不一样的,但是都能操作DOM

get()方法(jquery对象转化为DOM对象)

        var $main =$('.main');   // jquer对象

        var main = $main.get(0); // 通过get方法,转化成DOM对象

        main.style.color = '#c7edcc'; // 操作DOM对象属性

DOM对象转化为jQuery对象

  
    var main = document.getElementsByClassName('main'); // DOM对象
    
    var $main = $(main); // jQuery对象

    $main.css('color','#c7edcc'); // 操作jQuery对象属性

jQuery选择器

元素选择器

$('div')

ID选择器

$("#main")

id是唯一性,只能在页面中使用一次

类选择器

$('.main')

全选择器

$('*')

层次选择器

$('div .main')

更多选择器
$("a[href]") // 选择带href属性的a元素

$("div:first") // 选择第一个div元素

$("ul li:first-child") // 选择每个ul元素下的第一个li元素


jQuery过滤器

$('div').find('.main') // 选择div元素下的全部带有main类的元素

$(.main).parent() //选择.main类的上一级(父级)元素

$(.main).parents() //选择.main类的父(祖先)级元素


操作样式

$(.main).css({xxx : 'xx',xxx : 'xx'}) // 操作多条样式(对象)

.addClass() // 为被选择元素添加一个类或者多个类(class属性),多个类要使用空格分隔开

.removeClass() // 为被选择元素移除一个类或者多个类(class属性),多个类要使用空格分隔开,如果没有指定要移除那个类,那么将移除全部类

.hasClass() // 检测被选择元素是否存在某个类,返回的值为布尔值

.hide() // 被选择元素隐藏,可选参数为时间,单位为毫秒

.show() // 被选择元素显示,可选参数为时间,单位为毫秒

.fadeOut() // 被选择元素隐藏,带淡出效果,可选参数为时间,单位为毫秒

.fadeIn() // 被选择元素显示,带淡入效果,可选参数为时间,单位为毫秒

.slideUp() // 被选择元素隐藏,带滑动效果,可选参数为时间,单位为毫秒

.slideDown() // 被选择元素显示,带滑动效果,可选参数为时间,单位为毫秒


操作DOM

$('.main').text('hallo,world'); // 只能操作文本

.html('<p>hallo,world</p>') // 可以添加元素标签

.prepend('<p>hallo,world</p>') // 在前面添加

.append('<p>hallo,world</p>') // 在后面添加

.remove() // 删除


事件

$('.main').click() // 点击触发事件(单击)

.ready() // 当文档加载完成才执行触发事件

.dblclick() // 双击触发事件

.mouseenter() // 当鼠标移动到元素触发事件(接触元素)

.mouseleave() // 当鼠标离开元素触发事件

.mousedown() // 当鼠标移动元素,并且单击时触发事件

.mouseup() // 当鼠标在元素上点击,松开鼠标按键时触发事件

.hover() // 当鼠标移动到元素和离开元素时触发事件,有两个指定函数,但进入时触发第一个函数,离开时触发第二个函数

.focus() // 当焦点在元素上时,触发事件

.blur() // 当元素失去焦点时,触发事件

.keyup() // 当键盘被松开时触发事件

.keydown() // 当键盘被点击时触发事件

.keypress() // 当在输入处键盘被按键时触发(屏蔽输入法的按键,每输入一个字符,触发一次)

.scroll() // 当元素被滚动时触发(搭配overflow:scroll;使用更佳)

.resize() // 当对浏览器窗口调整大小时触发

.submit() // 当提交表单时触发(只作用在form元素)

.change() // 当元素的值被改变时,在失焦时触发(只适用文本域和 textarea元素,select 元素)

$('.main').val(); // 获取或者设置值(value属性,input元素)

.focus() // 当输入框得到焦点时触发

.select() // 当文本类型得到标记(被选择)时触发

.blur() // 当输入框失去焦点时触发

.submit() // 将表单数据提交到web服务器


操作元素属性

$('.main').attr("color","333") // 设置或者返回被选元素的属性和值

.prop() // 设置或者返回被选元素的属性和值

.removeAttr() // 移除属性

注意:

操作自定义属性要使用attr(),操作元素本身就携带的固有属性推荐使用prop()