动态广播,jquery学习总结

jquery学习总结

本文仅针对jquery的部分知识点做总结,更为全面的可以去官网看中文文档。可以更为详细的了解jquery及其特性。

  window.onload $(document).ready()
执行时机 必须等待网页中所有的内容加载完毕后(包括图片)才能执行 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完
编写个数 不能同时编写多个,以下代码无法正确执行:window.onload =function({alert("test1");}window.onload = function(){alert("test2");}结果只会输出"test2" 能同时编写多个
简化写法 $(document).ready(function(){});可以简写成$(function(){});

一、选择网页元素

  jQuery的基本设计和主要用法,就是”选择某个网页元素,然后对其进行某种操作”。这是它区别于其他函数库的根本特点。
  使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。

选择表达式可以是CSS选择器:

$(document)//选择整个文档对象
$(‘#myId’)//选择ID为myId的网页元素
$(‘div.myClass’)//选择class为myClass的div元素
$(‘input[name=first]’)//选择name属性等于first的input元素

也可以是jQuery特有的表达式:

$(‘a:first’)//选择网页中第一个a元素
$(‘tr:odd’)//选择表格的奇数行
$(‘#myForm :input’)//选择表单中的input元素
$(‘div:visible’) //选择可见的div元素
$(‘div:gt(2)’)//选择所有的div元素,除了前三个
$(‘div:animated’)//选择当前处于动画状态的div元素
  
二、改变结果集
  如果选中多个元素,jQuery提供过滤器,可以缩小结果集:

* $(‘div’).has(‘p’); //选择包含p元素的div元素
* $(‘div’).not(‘.myClass’); //选择class不等于myClass的div元素
* $(‘div’).filter(‘.myClass’); //选择class等于myClass的div元素
* $(‘div’).first(); //选择第1个div元素
* $(‘div’).eq(5); //选择第6个div元素
有时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法:

$(‘div’).next(‘p’); //选择div元素后面的第一个p元素
$(‘div’).parent(); //选择div元素的父元素
$(‘div’).closest(‘form’); //选择离div最近的那个form父元素
$(‘div’).children(); //选择div的所有子元素
$(‘div’).siblings(); //选择div的同级元素

三、链式操作
  选中网页元素以后,就可以对它进行某种操作。
  jQuery允许将所有操作连接在一起,以链条的形式写出来,比如:

$(‘div’).find(‘h3’).eq(2).html(‘Hello’);
 分解开来,就是下面这样:

  1. $(‘div’) //找到div元素

  2. .find(‘h3’) //选择其中的h3元素

  3. .eq(2) //选择第3个h3元素

  4. .html(‘Hello’); //将它的内容改为Hello
      这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。
     jQuery还提供了.end()方法,使得结果集可以后退一步:

  5. $(‘div’)

  6. .find(‘h3’)
  7. .eq(2)
  8. .html(‘Hello’)
  9. .end()//退回到选中所有的h3元素的那一步
  10. .eq(0)//选中第一个h3元素
  11. .html(‘World’); //将它的内容改为World
    .end():回到最近的一个”破坏性”操作之前。如果之前没有破坏性操作,则返回一个空集。所谓的”破坏性”就是指任何改变所匹配的jQuery元素的操作。

示例
描述:选取所有的p元素,查找并选取span子元素,然后再回过来选取p元素

HTML 代码:

Hello,how are you?

jQuery 代码: $(“p”).find(“span”).end() 结果:

Hello how are you?

四、元素的操作:取值和赋值

  操作网页元素,最常见的需求是取得它们的值,或者对它们进行赋值。
  jQuery使用同一个函数,来完成取值(getter)和赋值(setter)。到底是取值还是赋值,由函数的参数决定。

$(‘h1’).html(); //html()没有参数,表示取出h1的值
$(‘h1’).html(‘Hello’); //html()有参数Hello,表示对h1进行赋值
常见的取值和赋值函数如下:

  1. .html() 返回或设置被选元素的内容 (inner HTML)
  2. .text() 取出或设置text内容
  3. .attr() 取出或设置某个属性的值
  4. .width() 取出或设置某个元素的宽度
  5. .height() 取出或设置某个元素的高度
  6. .val() 取出或设置html内容 取出某个表单元素的值
      需要注意的是,如果结果集包含多个元素,那么赋值的时候,将对其中所有的元素赋值;取值的时候,则是只取出第一个元素的值(.text()例外,它取出所有元素的text内容)。

五、元素的操作:移动
.insertAfter(),把div元素移动p元素后面:

$(‘div’).insertAfter(‘p’);
.after(),把p元素加到div元素前面:

$(‘p’).after(‘div’);
使用这种模式的操作方法,一共有四对

  1. .insertAfter()和.after():在现存元素的外部,从后面插入元素
  2. .insertBefore()和.before():在现存元素的外部,从前面插入元素
  3. .appendTo()和.append():在现存元素的内部,从后面插入元素
  4. .prependTo()和.prepend() :在现存元素的内部,从前面插入元素

1.after():
描述:
在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:

Hello

I would like to say:

jQuery 代码: $(“p”).after( $(“b”) ); 结果:

I would like to say:

Hello

2.insertAfter():
描述:
把所有段落插入到一个元素之后。与 $(“#foo”).after(“p”)相同

HTML 代码:

I would like to say:

Hello

jQuery 代码: $(“p”).insertAfter(“#foo”); 结果:

Hello

I would like to say:

3.before():
描述:
在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:

I would like to say:

Hello jQuery 代码: $(“p”).before( $(“b”) ); 结果: Hello

I would like to say:

4.append():
描述:向所有段落中追加一些HTML标记。

HTML 代码:

I would like to say:

jQuery 代码: $(“p”).append(“Hello“); 结果:

I would like to say: Hello
5.appendTo()
描述:新建段落追加div中并加上一个class

HTML 代码:

jQuery 代码: $(“

“) .appendTo(“div”) .addClass(“test”) .end() .addClass(“test2”); 结果:
6.prepend()
描述:向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:

I would like to say:

Hello jQuery 代码: $(“p”).prepend( $(“b”) ); 结果:

HelloI would like to say:

7.prependTo()
描述:把所有段落追加到ID值为foo的元素中。

HTML 代码:

I would like to say:

jQuery 代码: $(“p”).prependTo(“#foo”); 结果:

I would like to say:

六、元素的操作:复制、删除和创建
  复制元素使用.clone()
  删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。
  清空元素内容(但是不删除该元素)使用.empty()。
  创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了:

* $('

Hello

‘); * $(‘

  • new list item
  • ‘); * $(‘ul’).append(‘
  • list item
  • ‘);
**七、工具方法**  
  除了对选中的元素进行操作以外,jQuery还提供一些工具方法(utility),不必选中元素,就可以直接使用。  
常用的工具方法有以下几种:

$.trim() 去除字符串两端的空格。  
$.each() 遍历一个数组或对象。  
$.inArray()
返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。  
$.grep() 返回数组中符合某种标准的元素。  
$.extend() 将多个对象,合并到第一个对象。  
$.makeArray() 将对象转化为数组。  
$.type()
判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)。  
$.isArray() 判断某个参数是否为数组。  
$.isEmptyObject() 判断某个对象是否为空(不含有任何属性)。  
$.isFunction() 判断某个参数是否为函数。  
$.isPlainObject() 判断某个参数是否为用"{}"或"new
Object"建立的对象。  
$.support() 判断浏览器是否支持某个特性。

**八、事件操作**  
 jQuery可以对网页元素绑定事件。根据不同的事件,运行相应的函数。

     $('p').click(function(){ 
     alert('Hello'); 
     }); 

目前,jQuery主要支持以下事件:

.blur() 表单元素失去焦点。  
.change() 表单元素的值发生变化  
.click() 鼠标单击  
.dblclick() 鼠标双击  
.focus() 表单元素获得焦点  
.focusin() 子元素获得焦点  
.focusout() 子元素失去焦点  
.hover() 同时为mouseenter和mouseleave事件指定处理函数  
.keydown() 按下键盘(长时间按键,只返回一个事件)  
.keypress() 按下键盘(长时间按键,将返回多个事件)  
.keyup() 松开键盘  
.load() 元素加载完毕  
.mousedown() 按下鼠标  
.mouseenter() 鼠标进入(进入子元素不触发)  
.mouseleave() 鼠标离开(离开子元素不触发)  
.mousemove() 鼠标在元素内部移动  
.mouseout() 鼠标离开(离开子元素也触发)  
.mouseover() 鼠标进入(进入子元素也触发)  
.mouseup() 松开鼠标  
.ready() DOM加载完成  
.resize() 浏览器窗口的大小发生改变  
.scroll() 滚动条的位置发生变化  
.select() 用户选中文本框中的内容  
.submit() 用户递交表单  
.toggle() 根据鼠标点击的次数,依次运行多个函数  
.unload()  
用户离开页面  
  以上这些事件在jQuery内部,都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件,比如为多个事件绑定同一个函数:

     $('input').bind( 
     'click change', //同时绑定click和change事件 
     function(){ 
     alert('Hello'); 
     } 
     ); 

有时,你只想让事件运行一次,这时可以使用.one()方法。

     $("p").one("click", function(){ 
     alert("Hello"); //只运行一次,以后的点击不会运行 
     }); 

unbind()用来解除事件绑定。

     $('p').unbind('click'); 

所有的事件处理函数,都可以接受一个事件对象(event
object)作为参数,比如下面例子中的e:

     $("p").click(function(e){ 
     alert(e.type); //"click" 
     });

  这个事件对象有一些很有用的属性和方法:

event.pageX 事件发生时,鼠标距离网页左上角的水平距离     
event.pageY 事件发生时,鼠标距离网页左上角的垂直距离  
event.type 事件的类型(比如click)     
event.which 按下了哪一个键     
event.data在事件对象上绑定数据,然后传入事件处理函数     
event.target 事件针对的网页元素  
event.preventDefault()
阻止事件的默认行为(比如点击链接,会自动打开新页面)  
event.stopPropagation() 停止事件向上层元素冒泡  
  在事件处理函数中,可以用this关键字,返回事件针对的DOM元素:

    $('a').click(function(){ 
    if ($(this).attr('href').match('evil')){//如果确认为有害链接 
    e.preventDefault(); //阻止打开 
    $(this).addClass('evil'); //加上表示有害的class 
    } 
    }); 

  有两种方法,可以自动触发一个事件。一种是直接使用事件函数,另一种是使用.trigger()或.triggerHandler()。

    $('a').click();
    $('a').trigger('click');

**九、特殊效果**

  jQuery允许对象呈现某些特殊效果。

$('h1').show(); //展现一个h1标题  
常用的特殊效果如下:

.fadeIn() 淡入  
.fadeOut() 淡出  
.fadeTo() 调整透明度  
.hide() 隐藏元素  
.show() 显示元素  
.slideDown() 向下展开  
.slideUp() 向上卷起  
.slideToggle() 依次展开或卷起某个元素  
.toggle() 依次展示或隐藏某个元素  
除了.show()和.hide(),所有其他特效的默认执行时间都是400ms(毫秒),但是你可以改变这个设置。

\* $('h1').fadeIn(300); // 300毫秒内淡入  
\* $('h1').fadeOut('slow'); //缓慢地淡出  
  在特效结束后,可以指定执行某个函数。

     $('p').fadeOut(300, function(){$(this).remove(); }); 

 更复杂的特效,可以用.animate()自定义。

     $('div').animate( 
     { 
     left : "+=50",//不断右移 
     opacity : 0.25 //指定透明度 
     },
     300,// 持续时间 
     function(){ alert('done!'); }//回调函数 
     ); 

  .stop()和.delay()用来停止或延缓特效的执行。  
  $.fx.off如果设置为true,则关闭所有网页特效。

几个常见的筛选选择器:

filter():筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式  
描述:保留子元素中不含有ol的元素。

HTML 代码:

1.  Hello

How are you?

jQuery 代码:

    $("p").filter(function(index) {
     return $("ol", this).length == 0;
    });

结果:

How are you?

silce():选取一个匹配的子集

描述:选择第一个p元素

HTML 代码:

Hello

cruel

World

jQuery 代码:

    $("p").slice(0, 1).wrapInner("");

结果:

**Hello**

后续更新……  

如何使用JQuery CDN?推荐使用官方的CDN节点,使用代码如下:  

 

    <script src="//code.jquery.com/jquery-1.11.0.min.js"> </script>   
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>   

 

本文仅针对jquery的部分知识点做总结,更为全面的可以去官网看中文文档。可以更为详细的了解jquery及其特性。
window.onload…

BLE-NRF51822教程8-动态广播

本讲接收如何实现动态广播。

教程基于 9.0 sdk中的 Uart例子。

实现动态广播的方法是 广播->停止广播->修改参数->重启广播

所以我们通过一个定时器来周期性的
关闭广播然后再修改广播数据之后再开启广播。

Sdk
9.0中的广播搞了好几个模式,做的有点麻烦,所以我对他做了比较大的改动。

首先 在main.c中 中的advertising_init函数需要改动。

主要修改还添加了红色部分。将 flag
改为了GENERAL。后面又将广播超时设置为0从而实现无线广播。

去掉了根据广播模式来设置广播数据的函数以及对扫描响应数据的设置。

void advertising_init(void)

{

uint32_t err_code;

ble_advdata_t advdata;

ble_advdata_t scanrsp;

memset(&advdata,0, sizeof(advdata));

advdata.name_type = BLE_ADVDATA_FULL_NAME;

advdata.include_appearance = false;

advdata.flags =BLE_GAP_ADV_FLAGS_LE_ONLY_GENERAL_DISC_MODE;

staticble_advdata_manuf_data_t manuf_data;

staticuint8_t mydata = 0; //这里用的是静态数据

//这里做的动态广播就是每次调用这个函

//数,广播数据中的厂商定义字段都会加1

manuf_data.company_identifier= 0xffaa;

manuf_data.data.size= 1;

manuf_data.data.p_data= &mydata;

mydata++; //每次调用后加1

advdata.p_manuf_specific_data= &manuf_data;

err_code= ble_advdata_set(&advdata, NULL);

APP_ERROR_CHECK(err_code);

}

然后是启动广播函数。 Main 函数中用的是ble_advertising_start。

我们这里不用。直接实现一个自己的简单函数

void myadv_start(void){

ble_gap_adv_params_tadv_params;

adv_params.interval =1600; //这里广播间隔设置为 1s

adv_params.timeout = 0;//这里设置0和上面的flag配合实现无线广播

adv_params.type =BLE_GAP_ADV_TYPE_ADV_IND;

adv_params.channel_mask.ch_37_off= 0;

adv_params.channel_mask.ch_38_off= 0;

adv_params.channel_mask.ch_39_off= 0;

adv_params.type = BLE_GAP_ADV_TYPE_ADV_IND;

adv_params.p_peer_addr= NULL;

adv_params.fp = BLE_GAP_ADV_FP_ANY;

adv_params.p_whitelist= NULL;

sd_ble_gap_adv_start(&adv_params);

}

之后我们做一个定时器。定时器的作用是以2s为周期
来关闭修改广播参数然后启动广播

在main 函数中做如下修改,创建一个 2s定时器 my_timer,并且开启它

int main(void)

{

uint32_t err_code;

bool erase_bonds;

uint8_t start_string[] = START_STRING;

app_timer_id_tmy_timer;

// Initialize.

APP_TIMER_INIT(APP_TIMER_PRESCALER, APP_TIMER_MAX_TIMERS,
APP_TIMER_OP_QUEUE_SIZE, false);

uart_init();

app_timer_create(&my_timer,APP_TIMER_MODE_REPEATED,

my_timer_handler);

buttons_leds_init(&erase_bonds);

ble_stack_init();

gap_params_init();

services_init();

advertising_init();

conn_params_init();

app_timer_start(my_timer,APP_TIMER_TICKS(2000,APP_TIMER_PRESCALER),
NULL);

myadv_start(); //这里用的自己定义的启动广播函数

for (;;)

{

power_manage();

}

}

然后实现自己的定时器的溢出处理函数

void my_timer_handler(void *p_contex){

int i =50;

sd_ble_gap_adv_stop(); //关广播

advertising_init(); //修改厂商自定义字段中的数据

while(i–);

myadv_start(); //开启广播

}

这里做的动态广播是动态修改广播数据中的厂商自定义字段。每次调用

advertising_init
函数的时候厂商自定义字段的值都会递增。在advertising_init函数中有注释说明

到这里动态广播要做的事已经做完了。

不过在uart例子中还需要做一个改动,我们创建了一个自己的timer,不过uart例子中定义的
允许使用的最大的
timer数就是它已经使用的数量,所以我们再添加自己的timer会出错。

修改办法:找到main.c文件中的APP_TIMER_MAX_TIMERS宏将其增大1就可以了

之后烧录程序就能看到广播数据中的厂商自定义字段在动态改变了
图片 1

本讲接收如何实现动态广播。 教程基于 9.0 sdk中的 Uart例子。
实现动态广播的方法是 广播->停止广播->修改参数-…

AngularJS 使用$sce控制代码安全检查,angularjssce

由于浏览器都有同源加载策略,不能加载不同域下的文件、也不能使用不合要求的协议比如file进行访问。

在angularJs中为了避免安全漏洞,一些ng-src或者ng-include都会进行安全校验,因此常常会遇到
一个iframe中的ng-src无法使用。

什么是SCE

SCE,即strict contextual escaping,我的理解是 严格的上下文隔离 
…翻译的可能不准确,但是通过字面理解,应该是angularjs严格的控制上下文访问。

由于angular默认是开启SCE的,因此也就是说默认会决绝一些不安全的行为,比如你使用了某个第三方的脚本或者库、加载了一段html等等。

这样做确实是安全了,避免一些跨站XSS,但是有时候我们自己想要加载特定的文件,这时候怎么办呢?

此时可以通过$sce服务把一些地址变成安全的、授权的链接…简单地说,
就像告诉门卫,这个陌生人其实是我的好朋友,很值得信赖,不必拦截它!

常用的方法有:

$sce.trustAs(type,name);
$sce.trustAsHtml(value);
$sce.trustAsUrl(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

其中后面的几个都是基于第一个api使用的,比如trsutAsUrl其实调用的是trsutAs($sce.URL,”xxxx”);

其中 type 可选的值为:

$sce.HTML
$sce.CSS
$sce.URL //a标签中的href , img标签中的src
$sce.RESOURCE_URL //ng-include,src或者ngSrc,比如iframe或者Object
$sce.JS

来自官网的例子:ng-bind-html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
  <div ng-controller="AppController">
   <i ng-bind-html="explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i>
  </div>
  <script type="text/javascript">
    angular.module('mySceApp',[])
    .controller('AppController', ['$scope', '$sce',
     function($scope, $sce) {
      $scope.explicitlyTrustedHtml = $sce.trustAsHtml(
        'Hover over this text.');
     }]);
  </script>
</body>
</html>

实际工作中的例子:ng-src链接

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
<div ng-controller="AppController">
  <iframe width="100%" height="100%" seamless frameborder="0" ng-src="{{trustSrc}}"></iframe>
</div>
  <script type="text/javascript">
    angular.module('mySceApp',[])
    .controller('AppController', ['$scope','$sce',function($scope,$sce) {
      $scope.trustSrc = $sce.trustAs($sce.RESOURCE_URL,"http://fanyi.youdao.com/");
      // $scope.trustSrc = $sce.trustAsResourceUrl("http://fanyi.youdao.com/");//等同于这个方法
     }]);
  </script>
</body>
</html>

还有点时间,接着给大家介绍angular中的ng-bind-html指令和$sce服务

angular
js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签。如:

$scope.currentWork.description =
“hello,<br><b>今天我们去哪里?</b>”
我们用ng-bind-html这样的指令来绑定,结果却不是我们想要的。是这样的

hello,

今天我们去哪里?

怎么办呢?

对于angular
1.2一下的版本我们必须要使用$sce这个服务来解决我们的问题。所谓sce即“Strict
Contextual
Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。来看看怎么用吧。

controller code:

$http.get('/api/work/get?workId=' + $routeParams.workId).success(function (work) {$scope.currentWork = work;});

HTML code:

<p> {{currentWork.description}}</p>

我们返回的内容中包含一系列的html标记。表现出来的结果就如我们文章开头所说的那样。这时候我们必须告诉它安全绑定。它可以通过使用$
sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。所以,我们必须在我们的控制器中引入$sce服务

controller('transferWorkStep2', ['$scope','$http','$routeParams','$sce', function ($scope,$http, $routeParams, $sce) {
$http.get('/api/work/get?workId=' + $routeParams.workId)
.success(function (work) {
  $scope.currentWork = work;
  $scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description);
});

html code:

<p ng-bind-html="currentWork.description"></p>

这样结果就完美的呈现在页面上了:

hello

今天我们去哪里?

咱们还可以这样用,把它封装成一个过滤器就可以在模板上随时调用了

app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
  return $sce.trustAsHtml(text);
};
}]);

html code:

全选复制放进笔记

<p ng-bind-html="currentWork.description | to_trusted"></p>

使用$sce控制代码安全检查,angularjssce
由于浏览器都有同源加载策略,不能加载不同域下的文件、也不能使用不合要求的协议比如…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图