jQuery笔记 (完整详细版)

第一章 初识jQuery

一、jQuery简介

1. 是什么是jQuery？
   jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.

2. 2.常见的javascript库?

入口函数

JQuery()和$()都称之为jq选择器环境，在里面添加上相关的选中器即可，就可以获取匹配元素

原生：windows.onload=function(...){
   }
JQuery:$(document).ready(function(){
   ...})
$(function(){
   ....})

jquery中的选择器（元素获取）

基础选择器

//id选择器
$('#box')
//类选择器
$('.box')
//标签选择器
$('input')
//通配符选择器
$('*')
//兄弟选择器
$('div,.box')
//后代选择器
$('from input')
//父子选择器
$('div>span')

基本筛选选择器

//获取匹配第一个元素
$(li:first)
//匹配最后一个元素
$('li:last')
//匹配所有索引值为偶数的元素
$('tr:even')
//匹配所有索引值为奇数的元素
$('tr:odd')
//匹配一个给定的索引值的元素
$('tr:eq(2)')
//匹配所有小于给定值的元素
$('tr:lt(3)')
//匹配所有大于给定索引值的元素
$('tr:gt(0)')
//匹配页面中所有的标题
$(':header')
//匹配所有正在执行的动画
$('div:not(:animated)')
//匹配当前获取焦点的元素
$( "#content" ).delegate( "*", "focus blur", function( event ) {
   
    var elem = $( this );
    setTimeout(function() {
   
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});

jquery中的隐式迭代

隐式迭代：把匹配到的使用的元素进行遍历循环，给每个元素添加CSS这个方法

//给四个div设置背景颜色为粉色，jquery镀锡不能使用style
$('div').css('backgroun','pink')
//隐式迭代就是把所有元素内部进行循环，给每个元素添加css这个方法
$('ul li').css('color','red')

事件

js代码

//注意：js的代码都是写在==后面，jquery的代码基本上写在()里面，
//jquery入口函数
$(function(){
   
    //js代码
    var btn = document.getElementById('btn')
    btn.onclick = function(){
   
        alert('按键被点击了。。。')
    }
 }