jQuery

jQuery是一个快速、简洁的JavaScript代码库。

jQuery设计的宗旨是“Write Less,Do More”,即倡导写更少的代码,做更多的事情。
它封装JavaScript常用的功能代码,提供一种简便的JavaScript操作方式,

优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery是一个快速、简洁的JavaScript代码库。

jQuery设计的宗旨是“Write Less,Do More”,即倡导写更少的代码,做更多的事情。
它封装JavaScript常用的功能代码,提供一种简便的JavaScript操作方式,

优化HTML文档操作、事件处理、动画设计和Ajax交互。

console.log() 打印到控制台
 $("").var() 获取对应信息内容
 blur(function(){})   这种写法 在 jquery 中 很常见

<!-- jquery选择器:$(“”)

基本选择器3种:     
    id选择器        // $("#p1").css("background-color","red");  // #id      
    标签选择器      // $("p").css("background-color","red");    // 标签名
    类选择器        // $(".c1").css("background-color","red");  // .类名
其他选择器:
    属性选择器  // $("[href]").css("background-color","red");   // 选中所有  href 属性的元素  
    交集选择器  // $("p.c2").css("background-color","red");     // 取 . 两边的交集
    后代选择器  // $("ul li").css("background-color","red");    // 取 ul 下所有级的 li 标签
    子选择器    // $("ul>li").css("background-color","yellow"); // 取 ul 下一级中所有的 li 标签
指定位置选择:
    // $("ul li:first").css("background-color","red");      // 首位
    //  $("ul li:last").css("background-color","green");    // 末位
    //  $("ul li:eq(2)").css("background-color","blue");    // 第三位   0,1,2

text()  // 得到 li 中的文本值	有参时 是为设置值,不会执行标签语言
html()  // 得到li 中的  包含标签在内的值 有参时 是为设置值,执行标签语言

$("ul").append(li1);    // 在 ul 后面追加 li1 变量所表示的内容
li.append(li2); <==> li.append(li2); //在 li 添加 li2
li2.insertBefore(li)    // 在 li2 前插入 li

操作文档结构学习:

获取元素对象

1、内部插入
	append("内容")				将指定的内容追加到对象的内部
	appendTo(元素对象或者选择器)		将制定的元素对象追加到指定的对象内容
	prepend()				将指定的内容追加到对象的内部的前面
	prependTo()				将制定的元素对象追加到指定的对象内容前面
2、外部插入
	after					将指定的内容追加到指定的元素后面
	before					将指定的内容追加到指定的元素前面
	insertAfter				把所有匹配的元素插入到另一个、指定的元素元素集合的后面
	insertBefore  			把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
3、包裹
	wrap   自行了解
4、替换
	replaceAll()   自行了解
	replaceWith()  
5、删除
	empty()
	remove() 

jquery 设置样式


$("ul li:eq(0)").attr("class","lc");     //  通过设置class 属性  而操作样式
$("ul li:eq(0)").addClass("lc2");       //  利用 class 属性  追加样式
$("ul li:eq(0)").removeClass("lc");     //消除 lc 指代的样式
$("p").css("color","blue");             //  通过css 设置样式
attr(attrName)                          //表示  获取attrName这个属性的值 
	注意此种方式不能获取value属性的实时数据,使用对象名.val()进行获取。
attr(attrName,attrValue);               //表示 给 attrName 这个属性设置值  attrValue 

jquery操作元素的样式

1、使用css()
	对象名.css("属性名")//返回当前属性的样式值
	对象名.css("属性名","属性值")//增加、修改元素的样式
	对象名.css({"样式名":"样式值","样式名":"样式值"……})//使用js对象传参,提升代码书写效率。
2、使用addClass()
	对象名.addClass("类选则器名")//追加一个类样式
	对象名.removeClass("类选择器 名")//删除一个指定的类样式
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值