【jQuery】jQuery基础

jQuery介绍

jQuery是一个轻量级JS库，使用十分简单；

jQuery的核心是选择器，用于获取页面元素；

jQuery提供了大量高效的方法，开发速度大幅提升；

jQuery选择器

• jQuery选择器用于选中需要操作的页面元素
• 语法1：jQuery(选择器表达式)
• 语法2：$(选择器表达式)

基本选择器

语法	说明
$("#id")	ID选择器，指定Id元素的对象
$("标签")	元素选择器，选择指定标签名的选择器
$(".class")	类选择器，选中拥有指定css类的元素
$("S1,S2,SN")	组合选择器，对元素进行组合

层叠选择器

语法	说明
$("ancestor descendant")	后代选择器
$("ancestor>descendant")	子选择器
$("prev~siblings")	兄弟选择器

属性选择器

语法	说明
$("selector[attribute=value]")	选中属性值等于具体值的组件
$("selector[attribute^=value]")	选中属性值以某值开头的组件
=value]")	选中属性值以某值结尾的组件
$("selector[attribute*=value]")	选中属性值包含某值的组件

位置选择器(不常用)

语法	说明
$("selector:first")	获取第一个元素
$("selector:last")	获取最后一个元素
$("selector:even")	获取偶数位置的元素(从0开始)
$("selector:odd")	获取奇数位置的元素(从0开始)
$("selector:eq(n)")	获取指定位置的元素(从0开始)

表单选择器(不常用)

语法	说明
$("selector:input")	所有输入元素
$("selector:text")	获取文本框
$("selector:password")	获取密码框
$("selector:submit")	获取提交按钮
$("selector:reset")	获取重置按钮
...

操作元素属性

• attr(name|properties|key) - 获取或设置元素属性
  $("a[href*='163']").attr("href", "http://www.163.com");将网易邮箱地址改为网易主页地址
• removeAttr(name) - 移除元素属性
  $("a").removeAttr("href");将所有a标签的href属性移除

操作元素的CSS样式

• css() - 获取或设置匹配元素的样式属性
  $("a").css("color", "red");将所有a标签的color样式设置为red
  $("a").css({"color":"red","font-weight":"bold"});传入JSON对象一次设置多个属性值
• addClass() - 为每个匹配的元素添加指定的类名
  $("li").addClass("highlight myclass");为li标签增加两个css类
• removeClass() - 从所有匹配的元素中删除全部或者指定的类
  $("p").removeClass("myclass");移除p标签的myclass类

设置元素内容

• val() - 获取或设置输入项的值
  $("input[name='username']").val();获取文本框的值
  $("input[name='username']").val("请输入姓名");设置文本框的值
• text() - 获取或设置元素的纯文本
  $("span").text("你好啊！");将span中的内容设置为你好啊(文本中的html标签进行转义)
• html() - 获取或设置元素内部的HTML
  $("span").html("你好啊！");将span中的内容设置为(加粗的)你好啊！(文本中的html标签不进行转义)

jQuery事件处理方法

• on("click", function) - 为选中的页面元素绑定单击事件
• click(function) - 是绑定事件的简写形式
• 处理方法中提供了event参数包含了事件的相关信息

jQuery常用事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
mouseover

实例

    
请选择背景颜色
    

        
蓝色
        
绿色
    
    

    

        输入颜色首字母：